<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>WebPack基础 | 晚夜微雨问海棠のBlog</title><meta name="keywords" content="WebPack"><meta name="author" content="晚夜微雨问海棠"><meta name="copyright" content="晚夜微雨问海棠"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Webpack基础AMD 规范传统HTML文件的引入问题 一个HTML页面中，如果引用了多个js文件会发生什么样的事情？ 比如我们下面的HTML文件中，引入了01.js和02.js，这两个文件中同时都设置了fun函数，此时的问题就来了，执行哪一个?  12345678910111213141516&lt;!DOCTYPE html&gt;&lt;html lang&#x3D;&quot;en&quot;&amp;g">
<meta property="og:type" content="article">
<meta property="og:title" content="WebPack基础">
<meta property="og:url" content="http://example.com/posts/7704b301.html">
<meta property="og:site_name" content="晚夜微雨问海棠のBlog">
<meta property="og:description" content="Webpack基础AMD 规范传统HTML文件的引入问题 一个HTML页面中，如果引用了多个js文件会发生什么样的事情？ 比如我们下面的HTML文件中，引入了01.js和02.js，这两个文件中同时都设置了fun函数，此时的问题就来了，执行哪一个?  12345678910111213141516&lt;!DOCTYPE html&gt;&lt;html lang&#x3D;&quot;en&quot;&amp;g">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2022/12/16/z7g88x.jpg">
<meta property="article:published_time" content="2022-12-16T08:48:26.000Z">
<meta property="article:modified_time" content="2023-01-06T12:45:23.280Z">
<meta property="article:author" content="晚夜微雨问海棠">
<meta property="article:tag" content="前端体系">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2022/12/16/z7g88x.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/posts/7704b301"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/manifest.json"/><meta name="msapplication-TileColor" content="#49b1f5"/><link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon/128.png"/><link rel="icon" type="image/png" sizes="32x32" href="/img/siteicon/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/img/siteicon/16.png"/><link rel="mask-icon" href="/img/siteicon/128.png" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":150},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":650,"languages":{"author":"作者: 晚夜微雨问海棠","link":"链接: ","source":"来源: 晚夜微雨问海棠のBlog","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"top-right"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'WebPack基础',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-01-06 20:45:23'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> <link rel="stylesheet" href="/swiper/swiper.min.css"> <link rel="stylesheet" href="/swiper/swiperstyle.css"> <link rel="stylesheet" href="/css/rightMenu.css"> <link rel="stylesheet" href="/css/constrain.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
<link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-blog@2.0.3/css/runtime/runtime.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/atom.xml" title="晚夜微雨问海棠のBlog" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg" style="background:url(https://s1.ax1x.com/2022/12/16/z7g88x.jpg);background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://img2.woyaogexing.com/2022/06/28/de1ce3dc65468fd4!400x400.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">97</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s1.ax1x.com/2022/12/16/z7g88x.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">晚夜微雨问海棠のBlog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">WebPack基础</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-12-16T08:48:26.000Z" title="发表于 2022-12-16 16:48:26">2022-12-16</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-01-06T12:45:23.280Z" title="更新于 2023-01-06 20:45:23">2023-01-06</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">45.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>190分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="WebPack基础"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Webpack基础"><a href="#Webpack基础" class="headerlink" title="Webpack基础"></a>Webpack基础</h1><h2 id="AMD-规范"><a href="#AMD-规范" class="headerlink" title="AMD 规范"></a>AMD 规范</h2><h3 id="传统HTML文件的引入问题"><a href="#传统HTML文件的引入问题" class="headerlink" title="传统HTML文件的引入问题"></a>传统HTML文件的引入问题</h3><ol>
<li>一个HTML页面中，如果引用了多个js文件会发生什么样的事情？</li>
<li>比如我们下面的HTML文件中，引入了01.js和02.js，这两个文件中同时都设置了fun函数，此时的问题就来了，执行哪一个?</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/01.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/02.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">fun</span>(<span class="number">3</span>,<span class="number">3</span>))</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>01.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>02.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a * b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时的执行结果是9，那是因为02.js是在01.js后面引入的</li>
<li>这样有什么问题？我们的工作中，不建议这样用，这样用的问题特别多。比如对于全局的污染，就像我们上面的两个fun函数。我们的工作中会引入更多的文件，如果都是全局变量，会造成全局的污染-变量名函数重名的问题等等</li>
<li>我们的解决办法是什么？js中使用IIFE来隔离作用域</li>
</ol>
<ol>
<li>01.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
<ol>
<li>02.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a * b;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
<ol>
<li>此时你会发现作用域被隔离了。是因为IIFE设置了比好</li>
<li>此时html文件的执行会报错</li>
<li>我们发现，作用域隔离了，但是此时的全局变量也没了，如果想在html文件中执行fun函数怎么办？</li>
<li>将该变量或者函数设置为全局变量也就是给 window对象设置属性</li>
<li>比如我们给01.js设置全局属性fun</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">fun</span> = <span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
<ol>
<li>html文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">fun</span>(<span class="number">3</span>,<span class="number">3</span>)) <span class="comment">//6</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时无论文件的引入顺序如何，结果都是6，因为只有一个全局的变量</li>
<li>但是IIFE隔离作用域也是有问题的，比如代码冗余的情况</li>
<li>比如01.js和02.js文件中，02想要引入01文件的函数（这个函数不是全局函数），不可行，必须自己单独再写一个，会造成代码冗余的情况</li>
</ol>
<h3 id="AMD规范-require-js"><a href="#AMD规范-require-js" class="headerlink" title="AMD规范-require.js"></a>AMD规范-require.js</h3><ol>
<li>AMD全称Asynchronous Module Definition（异步模块定义），代表库就是require.js</li>
<li>参考博客：<a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2012/11/require_js.html">http://www.ruanyifeng.com/blog/2012/11/require_js.html</a></li>
<li>require.js的下载地址：<a target="_blank" rel="noopener" href="https://requirejs.org/docs/release/2.3.6/minified/require.js">https://requirejs.org/docs/release/2.3.6/minified/require.js</a></li>
<li>直接复制代码，自己新建一个require.js</li>
</ol>
<h3 id="require-js的基本使用"><a href="#require-js的基本使用" class="headerlink" title="require.js的基本使用"></a>require.js的基本使用</h3><blockquote>
<p>┣ js</p>
<p>│┣ lib</p>
<p>││┣ require.js</p>
<p>│┣ main.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>main.js文件中我们随便弹出一些内容</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;你好&quot;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>在index.html文件中进行require.js文件的引入</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;js/lib/require.js&quot;</span> data-main=<span class="string">&quot;js/main.js&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>data-main属性的作用是，指定网页程序的主模块。</li>
<li>看一下如何进行进行暴露和引用的</li>
<li>此时目录</li>
</ol>
<blockquote>
<p>┣ js</p>
<p>│┣ lib</p>
<p>││┣ require.js</p>
<p>│┣ yuan.js</p>
<p>│┣ fang.js</p>
<p>│┣ main.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>我们将yuan.js进行设置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">define</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">mianji</span>(<span class="params">r</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="property">PI</span> * r * r</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    mianji</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>通过上面的代码你会发现，yuan.js用define()来包裹一个函数，我们称之为AMD的外壳，define是require.js封装的方法，返回的是一个对象，对象内部是暴露出去的内容</li>
<li>fang.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">define</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">mianji</span>(<span class="params">a,b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a * b</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    mianji</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>再来看main.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>], <span class="keyword">function</span> (<span class="params">yuan, fang</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(yuan.<span class="title function_">mianji</span>(<span class="number">100</span>))</span><br><span class="line">  <span class="title function_">alert</span>(fang.<span class="title function_">mianji</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>main.js需要使用require方法来获取依赖文件，然后将依赖文件注入到回调函数当中，我们叫做“依赖注入”，通过这种方式来引入模块/文件</li>
<li>此时我们就可以进行代码的执行了</li>
<li>需要注意的地方<ol>
<li>依赖的名称是文件名，不需要加后缀名，并且需要加引号，注入的时候不需要加引号</li>
<li>注入的名字可以不用依赖的名字，是按照引入顺序去进行注入的</li>
</ol>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>], <span class="keyword">function</span> (<span class="params">y, f</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(y.<span class="title function_">mianji</span>(<span class="number">100</span>))</span><br><span class="line">  <span class="title function_">alert</span>(f.<span class="title function_">mianji</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时你会发现同样能执行</li>
</ol>
<h3 id="别名的使用"><a href="#别名的使用" class="headerlink" title="别名的使用"></a>别名的使用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>], <span class="keyword">function</span> (<span class="params">y, f</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(y.<span class="title function_">mianji</span>(<span class="number">100</span>))</span><br><span class="line">  <span class="title function_">alert</span>(f.<span class="title function_">mianji</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>我们看上面的代码<code>yuan</code>和方法的引入<code>是没有路径</code>的，那是因为我们是<code>同目录引入</code>，此时我们将<code>yuan.js</code>和<code>fang.js</code>的目录修位置，放到<code>model</code>的文件夹内部</li>
</ol>
<blockquote>
<p>┣ js</p>
<p>│┣ lib</p>
<p>││┣ require.js</p>
<p>│┣ model</p>
<p>││┣ yuan.js</p>
<p>││┣ fang.js</p>
<p>│┣ main.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>此时的依赖引入</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;model/yuan&#x27;</span>, <span class="string">&#x27;model/fang&#x27;</span>], <span class="keyword">function</span> (<span class="params">y, f</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(y.<span class="title function_">mianji</span>(<span class="number">100</span>))</span><br><span class="line">  <span class="title function_">alert</span>(f.<span class="title function_">mianji</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们会发现引入是通过文件路径的，但是这样会影响代码的审查效率（美观性）和引入性</li>
<li>我们可以给路径设置别名</li>
<li>我们可以使用<code>require</code>对象的<code>config</code>方法类配置<code>paths</code>项</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>.<span class="title function_">config</span>(&#123;</span><br><span class="line">  <span class="attr">paths</span>: &#123;</span><br><span class="line">    <span class="string">&quot;yuan&quot;</span>: <span class="string">&quot;model/yuan&quot;</span>,</span><br><span class="line">    <span class="string">&quot;fang&quot;</span>: <span class="string">&quot;model/fang&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>], <span class="keyword">function</span> (<span class="params">y, f</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(y.<span class="title function_">mianji</span>(<span class="number">100</span>))</span><br><span class="line">  <span class="title function_">alert</span>(f.<span class="title function_">mianji</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="设置暴露口"><a href="#设置暴露口" class="headerlink" title="设置暴露口"></a>设置暴露口</h3><ol>
<li>比如我们想要引入第三方库，这个库如果要引入并使用，必须要有<code>AMD规范</code>的标准暴露口，如果没有的话，引入进来不能使用</li>
<li>比如引入jquery的低版本（2.0以下版 本）我使用的是1.2.3，jquery不是<code>AMD规范</code>的暴露</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>.<span class="title function_">config</span>(&#123;</span><br><span class="line">  <span class="attr">paths</span>: &#123;</span><br><span class="line">    <span class="string">&quot;jquery&quot;</span>: <span class="string">&quot;lib/jquery.min&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>, <span class="string">&quot;jquery&quot;</span>], <span class="keyword">function</span> (<span class="params">y, f, $</span>) &#123;</span><br><span class="line">  $(<span class="string">&quot;#box&quot;</span>).<span class="title function_">css</span>(<span class="string">&quot;background&quot;</span>,<span class="string">&quot;blue&quot;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>index.html</code>文件中设置了一个盒子<code>#box</code>的宽度和高度为<code>200</code></li>
<li>此时是因为<code>jquery</code>的这个版本是不符合<code>AMD规范</code>的，没有对<code>define方法</code>做适配</li>
<li>解决办法是加<code>shim</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>.<span class="title function_">config</span>(&#123;</span><br><span class="line">  <span class="attr">paths</span>: &#123;</span><br><span class="line">    <span class="string">&quot;yuan&quot;</span>: <span class="string">&quot;model/yuan&quot;</span>,</span><br><span class="line">    <span class="string">&quot;fang&quot;</span>: <span class="string">&quot;model/fang&quot;</span>,</span><br><span class="line">    <span class="string">&quot;jquery&quot;</span>: <span class="string">&quot;lib/jquery.min&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">shim</span>: &#123;</span><br><span class="line">    <span class="string">&quot;jquery&quot;</span>: &#123;</span><br><span class="line">      <span class="attr">exports</span>: <span class="string">&quot;$&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>shim</code>是增加一个暴露口，目的是为了让不支持<code>AMD规范</code>的文件库，能够在<code>AMD</code>中运行</li>
<li>如果有多个依赖项，可以在<code>shim</code>中继续配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>.<span class="title function_">config</span>(&#123;</span><br><span class="line">  <span class="attr">paths</span>: &#123;</span><br><span class="line">    <span class="string">&quot;jq&quot;</span>: <span class="string">&quot;lib/jquery.min&quot;</span>,</span><br><span class="line">    <span class="string">&quot;jqui&quot;</span>: <span class="string">&quot;lib/jquery-ui.min&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">shim</span>: &#123;</span><br><span class="line">    <span class="string">&quot;jq&quot;</span>: &#123;</span><br><span class="line">      <span class="attr">exports</span>: <span class="string">&quot;$&quot;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">&#x27;jqui&#x27;</span>: &#123;</span><br><span class="line">      <span class="attr">deps</span>: [<span class="string">&#x27;jq&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>, <span class="string">&quot;jq&quot;</span>,<span class="string">&quot;jqui&quot;</span>], <span class="keyword">function</span> (<span class="params">y, f, $,jqui</span>) &#123;</span><br><span class="line">  $(<span class="string">&quot;#box&quot;</span>).<span class="title function_">css</span>(<span class="string">&quot;background&quot;</span>, <span class="string">&quot;blue&quot;</span>)</span><br><span class="line">  $(<span class="string">&quot;#box&quot;</span>).<span class="title function_">draggable</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的代码表示<code>jquery-ui</code>本身要依赖<code>jquery</code>，所以我们要配置<code>deps</code></li>
<li><code>require.config()</code>接受一个配置对象，这个对象除了有前面说过的<code>paths</code>属性之外，还有一个<code>shim</code>属性，专门用来配置不兼容的模块。</li>
<li>具体来说，每个模块要定义（<code>exports</code>值（输出的变量名），表明这个模块外部调用时的名称；<code>deps</code>数组，表明该模块的依赖性。</li>
</ol>
<h2 id="CMD规范"><a href="#CMD规范" class="headerlink" title="CMD规范"></a>CMD规范</h2><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><ol>
<li>CMD英文全称 Common Module Definition（通用模块定义）；</li>
<li>我们之前是接触过<code>CMD规范</code>的，那就是NodeJS</li>
<li>CMD规范的实现：commonjs 、seajs、nodejs</li>
<li>我们以<code>seajs</code>举例实现</li>
<li>我们从“字节跳动静态资源库”中下载<code>seajs</code></li>
<li>地址：<a target="_blank" rel="noopener" href="https://s0.pstatp.com/cdn/expire-1-M/seajs/3.0.3/sea.js">https://s0.pstatp.com/cdn/expire-1-M/seajs/3.0.3/sea.js</a></li>
<li>静态库地址：<a target="_blank" rel="noopener" href="http://cdn.bytedance.com/">http://cdn.bytedance.com/</a></li>
</ol>
<blockquote>
<p>┣ js</p>
<p>│┣ lib</p>
<p>││┣ sea.js</p>
<p>│┣ yuan.js</p>
<p>│┣ fang.js</p>
<p>│┣ main.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>index.html</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;script src=&quot;js/lib/sea.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    seajs.use(&quot;./js/main.js&quot;)</span><br><span class="line">  &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面是引入<code>sea.js</code>文件后向外暴露一个<code>seajs</code>的方法，内部的参数是引导文件路径</li>
<li>yuan.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">define</span>(<span class="keyword">function</span> (<span class="params"><span class="built_in">require</span>, exprots, <span class="variable language_">module</span></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">mianji</span>(<span class="params">r</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">3.14</span> * r * r;</span><br><span class="line">  &#125;</span><br><span class="line">  exprots.<span class="property">mianji</span> = mianji</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>fang.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">define</span>(<span class="keyword">function</span> (<span class="params"><span class="built_in">require</span>, exprots, <span class="variable language_">module</span></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">mianji</span>(<span class="params">a,b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a * b;</span><br><span class="line">  &#125;</span><br><span class="line">  exprots.<span class="property">mianji</span> = mianji</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>main.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">define</span>(<span class="keyword">function</span> (<span class="params"><span class="built_in">require</span>, exprots, <span class="variable language_">module</span></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> yuan = <span class="built_in">require</span>(<span class="string">&quot;./yuan.js&quot;</span>);</span><br><span class="line">  <span class="keyword">var</span> fang = <span class="built_in">require</span>(<span class="string">&quot;./fang.js&quot;</span>);</span><br><span class="line">  <span class="title function_">alert</span>(yuan.<span class="title function_">mianji</span>(<span class="number">10</span>))</span><br><span class="line">  <span class="title function_">alert</span>(fang.<span class="title function_">mianji</span>(<span class="number">10</span>,<span class="number">20</span>))</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li><code>define</code>这个外壳就是<code>CMD</code>规范的外壳，我们之前学习的<code>NodeJS</code>是可以不带外壳的<code>CMD</code>规范，所以你就知道了<code>require、exports、module</code>都是从何而来的了，都是从<code>CMD</code>规范封装的方法中来的</li>
</ol>
<h3 id="CMD和AMD规范的区别"><a href="#CMD和AMD规范的区别" class="headerlink" title="CMD和AMD规范的区别"></a>CMD和AMD规范的区别</h3><ol>
<li><code>AMD</code>规范是中的<code>require</code>方法异步的，依赖模块是没有加载顺序之分的，所有的模块加载完毕后执行回调函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">&#x27;yuan&#x27;</span>, <span class="string">&#x27;fang&#x27;</span>, <span class="string">&quot;jq&quot;</span>,<span class="string">&quot;jqui&quot;</span>], <span class="keyword">function</span> (<span class="params">y, f, $,jqui</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(y.<span class="title function_">mianji</span>(<span class="number">100</span>))</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(f.<span class="title function_">mianji</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;888888&quot;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码的核心部分就是执行</li>
<li><code>require</code>里面的语句是异步语句，把依赖项目都加载完毕后才执行回调函数，这个就是异步的由来</li>
<li><code>CMD</code>规范中的<code>require</code>方法是同步的</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">define</span>(<span class="keyword">function</span> (<span class="params"><span class="built_in">require</span>, exprots, <span class="variable language_">module</span></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> yuan = <span class="built_in">require</span>(<span class="string">&quot;./yuan.js&quot;</span>);</span><br><span class="line">  <span class="keyword">var</span> fang = <span class="built_in">require</span>(<span class="string">&quot;./fang.js&quot;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(yuan.<span class="title function_">mianji</span>(<span class="number">10</span>))</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(fang.<span class="title function_">mianji</span>(<span class="number">10</span>, <span class="number">20</span>))</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;888888&quot;</span>)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>1.<code>AMD</code>市场是比较惨淡的，目前只有<code>require.js</code>对<code>AMD</code>进行了实现，<code>Angular1</code>使用的是<code>AMD</code>规范，从<code>Angular2</code>开始放弃了<code>AMD</code>，统一使用的都是CMD规范</p>
<ol>
<li>无论<code>CMD</code>还是<code>AMD</code>和业务是没有关系的，就是文件的组织形式。服务于高级架构课程的</li>
</ol>
<h2 id="ES6-module语法"><a href="#ES6-module语法" class="headerlink" title="ES6-module语法"></a>ES6-module语法</h2><h3 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h3><ol>
<li>为什么要有<code>module</code>模块化？</li>
<li>历史上，<code>JavaScript</code> 一直没有模块（<code>module</code>）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。</li>
<li>其他语言都有这项功能，比如 <code>Ruby</code> 的<code>require</code>、<code>Python</code> 的<code>import</code>，甚至就连 <code>CSS</code> 都有<code>@import</code>，但是 <code>JavaScript</code> 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍</li>
<li>在 <code>ES6</code> 之前，社区制定了一些模块加载方案，最主要的有 <code>CommonJS</code> 和 <code>AMD</code> 两种。前者用于服务器，后者用于浏览器。</li>
<li><code>ES6</code> 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 <code>CommonJS</code> 和 <code>AMD</code> 规范，成为浏览器和服务器通用的模块解决方案。</li>
<li><code>ES6</code> 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量</li>
</ol>
<h3 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h3><ol>
<li>下面的是目录结构</li>
</ol>
<blockquote>
<p>┣ js</p>
<p>│┣ import.js</p>
<p>│┣ export.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>我们要将<code>index.html</code>文件当做浏览器显示页面，需要引入<code>import.js</code> 文件即可，<code>import.js</code>文件中要获取<code>export.js</code>文件中的值</li>
<li><code>index.html</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;script src=&quot;js/import.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是，如果我们是普通<code>html</code>文件引入带有<code>module</code>语法的<code>js</code>文件，此时<code>html</code>文件的<code>script</code>标签的<code>type</code>要为<code>module</code>，否则会报错</li>
<li><code>import.js</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;a,b&#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a,<span class="string">&#x27;a的结果&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b,<span class="string">&#x27;b的结果&#x27;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>import</code>表示的是导入，<code>es6</code>使用<code>import</code>关键字来表示导入文件和数据，<code>&#123;&#125;</code>内部值是<code>export</code>暴露的参数</li>
<li><code>export.js</code></li>
<li>向外暴露了a和b</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> b = <span class="number">200</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时打开浏览器，注意要在服务器环境打开</li>
<li>获取基本值总结：<ol>
<li><code>module</code>语法如果是<code>html</code>文件直接打开的，要将<code>html</code>文件的<code>script</code>标签的<code>type</code>设置为<code>module</code></li>
<li><code>js</code>文件如果要导入其他的文件，需要使用<code>import</code>关键字导入，后面是要获取的参数，使用<code>&#123;&#125;</code>来枚举值，最后是路径</li>
<li><code>js</code>文件如果要暴露参数使用<code>export</code>关键字</li>
</ol>
</li>
</ol>
<h3 id="别名"><a href="#别名" class="headerlink" title="别名"></a>别名</h3><ol>
<li>如果一个<code>js</code>文件中获取多个<code>js</code>文件的参数，难免会遇到重名的问题，比如01.js获取02.js和03.js的值，此时恰好02.js和03.js都有一个参数a，此时必定会有命名冲突，我们可以设置别名来避免这个冲突</li>
</ol>
<blockquote>
<p>┣ js</p>
<p>│┣ import.js</p>
<p>│┣ export.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>export.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> name = <span class="string">&quot;小明&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> age = <span class="number">18</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>import.js 文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; name <span class="keyword">as</span> myname, age &#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myname,age)</span><br></pre></td></tr></table></figure>
<ol>
<li>可以用<code>as</code>关键字用来设置别名，此时我们使用的时候就必须要用这个别名，不能用原来的名字，获取不到</li>
<li>除了获取可以使用别名外，暴露也可以设置别名</li>
<li>export.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;add <span class="keyword">as</span> funAdd&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>import.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; funAdd &#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">funAdd</span>(<span class="number">1</span>, <span class="number">3</span>))</span><br></pre></td></tr></table></figure>
<h3 id="获取值的修改"><a href="#获取值的修改" class="headerlink" title="获取值的修改"></a>获取值的修改</h3><blockquote>
<p>┣ js</p>
<p>│┣ import.js</p>
<p>│┣ export.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li><code>import</code>导入的值如果是基本类型值，是只读的，不可以进行修改</li>
<li>比如修改age为19</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; name <span class="keyword">as</span> myname, age &#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line">age = <span class="number">19</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>import</code>如果导入的是引用类型值，此时是可以进行修改的</li>
<li>export.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;小明&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">19</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>import.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; obj &#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br><span class="line">obj.<span class="property">age</span> = <span class="number">20</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br></pre></td></tr></table></figure>
<ol>
<li>如果暴露的参数是函数，是存在变量声明提升的</li>
<li>export.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>import.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">1</span>, <span class="number">3</span>)) <span class="comment">// 4</span></span><br><span class="line"><span class="keyword">import</span> &#123; add &#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br></pre></td></tr></table></figure>
<h3 id="module的静态加载"><a href="#module的静态加载" class="headerlink" title="module的静态加载"></a>module的静态加载</h3><blockquote>
<p>┣ js</p>
<p>│┣ import.js</p>
<p>│┣ export.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li><code>module</code>的暴露是编译时的加载，不是运行时的加载，所以我们的<code>import</code>不能牵扯到逻辑判断，比如：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">  <span class="keyword">import</span> &#123; funAdd &#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">funAdd</span>(<span class="number">1</span>, <span class="number">3</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的代码中，if语句是逻辑判断，所以<code>import</code>不能使用，会报错</li>
</ol>
<h3 id="as整合模块"><a href="#as整合模块" class="headerlink" title="* as整合模块"></a>* as整合模块</h3><blockquote>
<p>┣ js</p>
<p>│┣ import.js</p>
<p>│┣ export.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li><code>*</code>表示通配，<code>as</code>表示别名，所以我们可以用<code>* as</code> 别名 的 方式来整合模块</li>
<li>export.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> b = <span class="number">200</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> c = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> d = <span class="number">400</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>import.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> results <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(results)</span><br></pre></td></tr></table></figure>
<h3 id="export-default默认暴露"><a href="#export-default默认暴露" class="headerlink" title="export default默认暴露"></a>export default默认暴露</h3><blockquote>
<p>┣ js</p>
<p>│┣ import.js</p>
<p>│┣ export.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li><code>export</code> 表示暴露参数，<code>default</code> 表示默认暴露参数，此时<code>import</code>就可以省略<code>&#123;&#125;</code></li>
<li><code>export</code> <code>default</code>可以暴露基本类型值，但是我们一般都是暴露引用类型值，对象或者函数</li>
<li><code>export.js</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">100</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="number">200</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>export</code> <code>default</code>每一个文件中只能使用一次</li>
<li><code>export.js</code>文件向外暴露的是一个对象，这个对象没有命名，此时的<code>import</code>就可以随意命名</li>
<li><code>import.js</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> obj <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时的<code>import</code>后面不用<code>&#123;&#125;</code>去解构参数了，而是自定义名称获取</li>
</ol>
<h3 id="导出和导入的复合写法"><a href="#导出和导入的复合写法" class="headerlink" title="导出和导入的复合写法"></a>导出和导入的复合写法</h3><ol>
<li>如果有三个文件<code>a.js,b.js,c.js</code>，此时我们的<code>a.js</code>文件获取的是<code>b.js</code>文件的内容，<code>b.js</code>获取的是<code>c.js</code>的内容，并且将<code>c</code>文件的暴露给<code>a</code></li>
</ol>
<blockquote>
<p>┣ js</p>
<p>│┣ a.js</p>
<p>│┣ b.js</p>
<p>│┣ c.js</p>
<p>┣ index.html</p>
</blockquote>
<ol>
<li>a.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;c&#125; <span class="keyword">from</span> <span class="string">&quot;./export.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(c) <span class="comment">//300</span></span><br></pre></td></tr></table></figure>
<ol>
<li>b.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> &#123;c&#125; <span class="keyword">from</span> <span class="string">&quot;./c.js&quot;</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>export</code>表示暴露，<code>from</code>表示取值，此时整体表示的是向外暴露的是获取<code>c</code>文件的值</li>
<li>c.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> c = <span class="number">300</span>;</span><br></pre></td></tr></table></figure>
<h2 id="Webpack的使用"><a href="#Webpack的使用" class="headerlink" title="Webpack的使用"></a>Webpack的使用</h2><h3 id="概述-1"><a href="#概述-1" class="headerlink" title="概述"></a>概述</h3><ol>
<li><code>webpack</code>是<code>node</code>工作流工具，是一个模块打包器。它的主要目的是将<code>JavaScript</code>的文件打包到一起，打包将复杂的、浏览器不识别的文件、语法变为浏览器识别的文件和语法后用于在浏览器中使用</li>
<li>官网地址：<a target="_blank" rel="noopener" href="https://webpack.docschina.org/">https://webpack.docschina.org/</a></li>
<li><code>webpack</code>已经升级到5版本，按照最新的进行学习，每个版本大多数配置内容是统一的，只要少数内容不同，或者有了更多的优化</li>
</ol>
<h3 id="webpack的体验"><a href="#webpack的体验" class="headerlink" title="webpack的体验"></a>webpack的体验</h3><ol>
<li>使用<code>webpack</code>必须要先安装<code>webpack</code>的相关依赖</li>
<li>我们需要<code>-g</code>全局安装<code>webpack</code>和<code>webpack-cli</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack webpack-cli -g</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们可以通过<code>-v</code>来查看版本号</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack -v</span><br></pre></td></tr></table></figure>
<blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│build</p>
<p>│┣ build.js</p>
</blockquote>
<ol>
<li>index.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">1</span>,<span class="number">2</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>此时输入打包命令，注意<code>webpack5</code>和<code>webpack4</code>打包的时候会有稍许的不同，<code>webpack5</code>进行的是文件夹的创建，<code>webpack4</code>一下创建的是文件夹和文件</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack ./src/index.js -o ./build/build.js --mode=development</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的命名表示将<code>./src/index.js</code>文件的内容打包到<code>./build/build.js</code>文件中，如果是<code>webpack5</code>,就表示<code>build.js</code>文件夹中的<code>main.js</code></li>
<li><code>--mode=development</code> 表示的是打包开发环境</li>
<li>此时我们的<code>build</code>文件中就有了<code>webpack</code>打包的代码</li>
<li>还有一种打包方式是生产环境的打包</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack ./src/index.js -o ./build/build.js --mode=production</span><br></pre></td></tr></table></figure>
<ol>
<li>你会发现<code>production</code>打包的代码会进行压缩</li>
</ol>
<h3 id="production和development的区别"><a href="#production和development的区别" class="headerlink" title="production和development的区别"></a>production和development的区别</h3><ol>
<li><p><code>webpack</code>进行打包的时候分为两种，一种是<code>development</code>（开发环境）面向开发者，一种是<code>production</code>（生产环境）面向用户</p>
<p>无论是开发环境还是生产环境，都是将ES6模块化编译为浏览器能识别的语法</p>
</li>
<li><p>两者有什么区别？</p>
</li>
<li><p>安装依赖的时候是有区别的</p>
</li>
<li><p>我们之前安装依赖的时候都是输入<code>—-save **</code>，比如</p>
</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install –-save nzh 或者 npm install nzh -S</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们的依赖无论是开发还是生产都需要用得到</li>
<li>如果我们只要是在开发环境用到的依赖，比如我们的<code>webpack</code>打包编译，在生产环境是不需要的，所以我们就单独给安装开发依赖<code>–-save -dev</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install –-save -dev webpack 或者 npm install nzh -D</span><br></pre></td></tr></table></figure>
<ol>
<li>此时你会发现依赖安装的时候多了<code>-dev</code>，<code>dev</code>就表示开发环境依赖</li>
<li>上面的打包方法主要是用来进行体验的，实际工作中基本不会这样打包</li>
<li>主要是这种打包方式是有<code>局限</code>的，比如我们要打包<code>css</code>文件，此时会报错</li>
<li>主要是因为我们没有配置需要让<code>webpack</code>打包翻译哪些内容</li>
</ol>
<h3 id="基本配置"><a href="#基本配置" class="headerlink" title="基本配置"></a>基本配置</h3><ol>
<li>我们需要有指导文件，指导<code>webpack</code>如何进行打包，<code>webpack</code>是依赖<code>webpack.config.js</code>来进行配置 的</li>
</ol>
<blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│build</p>
<p>│┣ build.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>webpack.config.js的配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;resolve&#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">//输出文件名</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 输出的路径</span></span><br><span class="line">    <span class="comment">// __dirname表示当前文件的绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 打包模式development表示开发，production表示生产</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时输入命令<code>webpack</code>即可</li>
</ol>
<h3 id="配置样式"><a href="#配置样式" class="headerlink" title="配置样式"></a>配置样式</h3><blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.css</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>如果我们要打包样式文件，需要配置相关的<code>loader</code></li>
<li><code>index.js</code>中只引入了<code>css</code>文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&quot;./index.css&quot;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>配置哪些<code>loader</code>就需要装这些<code>loader</code>的依赖</li>
<li>注意：<code>loader</code>的执行顺序是倒叙的，后写的先执行</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install style-loader css-loader -D</span><br></pre></td></tr></table></figure>
<ol>
<li>配置相关的<code>loader</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;resolve&#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">//输出文件名</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 输出的路径</span></span><br><span class="line">    <span class="comment">// __dirname表示当前文件的绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 配置相关的loader</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="comment">// 相关规则，内部是json配置项，每一个json就代表一个loader</span></span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 引导打包文件和编译的文件为css文件</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="comment">// 内部执行哪些loader,loader的执行顺序是倒叙的，后写的先执行</span></span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// 识别css-laoder的js字符串为样式代码，添加到head标签</span></span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// css-loader是将样式的代码翻译为js的模式，内部是样式的字符串</span></span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 打包模式development表示开发，production表示生产</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>比如我们还想配置 <code>less</code></li>
<li>还需要安装<code>less</code>相关的<code>loader</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install less less-loader -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;resolve&#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">//输出文件名</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 输出的路径</span></span><br><span class="line">    <span class="comment">// __dirname表示当前文件的绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 配置相关的loader</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="comment">// 相关规则，内部是json配置项，每一个json就代表一个loader</span></span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 引导打包文件和编译的文件为css文件</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="comment">// 内部执行哪些loader，loader的执行顺序是倒叙的，后写的先执行</span></span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// 识别css-laoder的js字符串为样式代码，添加到head标签</span></span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// css-loader是将样式的代码翻译为js的模式，内部是样式的字符串</span></span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 引导打包文件和编译的文件为css文件</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        <span class="comment">// 内部执行哪些loader，loader的执行顺序是倒叙的，后写的先执行</span></span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// 识别css-laoder的js字符串为样式代码，添加到head标签</span></span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// css-loader是将样式的代码翻译为js的模式，内部是样式的字符串</span></span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// less-loader的作用是将less文件变为css文件</span></span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 打包模式development表示开发，production表示生产</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="配置html文件"><a href="#配置html文件" class="headerlink" title="配置html文件"></a>配置html文件</h3><blockquote>
<p>┣ src</p>
<p>│┣ index.html</p>
<p>│┣ index.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>index.html</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-webpack<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>html</code>文件没有任何的引入，没有<code>script</code>标签</li>
<li>index.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">1</span>,<span class="number">2</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>js</code>文件也没有任何的文件引入，没有<code>require</code>或者<code>import</code></li>
<li>此时我们需要配置打包<code>html</code>模板的<code>plugin</code>插件</li>
<li>注意：所有的 <code>plugin</code> 插件都要用 <code>new</code> 引用</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install html-webpack-plugin -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      <span class="comment">// loader配置的地方</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>html-webpack-plugin</code>作用会创建一个<code>html</code>文件，自动引入打包输出的资源，<code>js/css</code>文件</li>
<li>总结：<ol>
<li><code>html-webpack-plugin</code>功能插件，作用就是自动让<code>webpack</code>识别模板，从而和入口文件进行整合，让浏览器可以进行展示</li>
<li><code>html</code>文件和js文件都不需要互相引用，<code>webpack</code>会自动整合</li>
</ol>
</li>
</ol>
<h2 id="webpack的核心概念"><a href="#webpack的核心概念" class="headerlink" title="webpack的核心概念"></a>webpack的核心概念</h2><ol>
<li>我们要使用<code>webpack</code>进行打包就必须要掌握<code>webpack</code>的5个核心的概念</li>
</ol>
<ol>
<li>入口(<code>entry</code>)<ol>
<li>入口起点(<code>entry</code> <code>point</code>) 指示 <code>webpack</code> 应该使用哪个模块，来作为构建其内部的开始。进入入口起点后，<code>webpack</code> 会找出有哪些模块和库是入口起点（直接和间接）依赖的。</li>
</ol>
</li>
<li>输出(<code>output</code>)<ol>
<li><code>output</code> 属性告诉 <code>webpack</code> 在哪里输出它所创建的 <code>bundle</code>，以及如何命名这些文件。主要输出文件的默认值是 <code>./dist/main.js</code>，其他生成文件默认放置在 <code>./dist</code> 文件夹中</li>
</ol>
</li>
<li>loader<ol>
<li><code>webpack</code> 只能理解 <code>JavaScript</code> 和 <code>JSON</code> 文件，这是 <code>webpack</code> 开箱可用的自带能力。<code>loader</code> 让 <code>webpack</code> 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中</li>
</ol>
</li>
<li>插件(<code>plugin</code>)<ol>
<li><code>loader</code> 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量</li>
</ol>
</li>
<li>模式(<code>mode</code>)<ol>
<li>通过选择 <code>development</code>, <code>production</code>之中的一个，来设置 mode 参数，你可以启用 <code>webpack</code> 内置在相应环境下的优化。其默认值为 <code>production</code></li>
</ol>
</li>
<li>掌握上面的5个核心概念，才能深入学习<code>webpack</code></li>
</ol>
<h2 id="CSS的常用配置"><a href="#CSS的常用配置" class="headerlink" title="CSS的常用配置"></a>CSS的常用配置</h2><ol>
<li>我们之前学习<code>style-loader</code>、<code>css-loader</code>、<code>less-loader</code>都是基础配置，也就是入门必备配置</li>
<li>常用配置指的是按需配置，需要使用的时候再进行的配置</li>
</ol>
<h3 id="提取css文件"><a href="#提取css文件" class="headerlink" title="提取css文件"></a>提取css文件</h3><blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.css</p>
<p>│┣ index.html</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>我们设置一个<code>index.css</code>文件的内容</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>,<span class="selector-tag">html</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: deepskyblue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>安装依赖</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install mini-css-extract-plugin -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">MiniCssExtractPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>()</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们的<code>build</code>文件夹内部就打包生成了三个文件，<code>index.html</code>、<code>bluid.js</code>、<code>main.css</code></li>
<li><code>index.html</code>文件会自动引入这个<code>js</code>文件和<code>css</code>文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">  &lt;script defer src=&quot;bluid.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">  &lt;link href=&quot;main.css&quot; rel=&quot;stylesheet&quot;&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;h1&gt;你好-webpack&lt;/h1&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>输出的<code>css</code>文件，可以设置输出目录</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 输出路径</span></span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;css/index.css&#x27;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="压缩css文件"><a href="#压缩css文件" class="headerlink" title="压缩css文件"></a>压缩css文件</h3><blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.css</p>
<p>│┣ index.html</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>只需要增加一个插件</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install optimize-css-assets-webpack-plugin -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">MiniCssExtractPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">OptimizeCssAssetsWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;optimize-css-assets-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>(),</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">OptimizeCssAssetsWebpackPlugin</span>()</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="JS文件的常用配置"><a href="#JS文件的常用配置" class="headerlink" title="JS文件的常用配置"></a>JS文件的常用配置</h2><h3 id="ES6的语法兼容"><a href="#ES6的语法兼容" class="headerlink" title="ES6的语法兼容"></a>ES6的语法兼容</h3><ol>
<li><code>ES6</code>的语法兼容，低版本浏览器是不识别的，比如<code>IE8</code>以下，如果使用<code>webpack</code>进行打包<code>js</code>文件，是不会进行翻译的，我们之前学习<code>babel</code>的时候，发现<code>babel</code>会帮我们翻译<code>ES6</code>的语法</li>
</ol>
<blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>index.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">fun</span> = (<span class="params">a, b</span>) =&gt; a + b;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">fun</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>此时webpack的配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line"></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>没有任何的规则，只是引入了html的插件，此时打包后我们在IE8查看，会报错</li>
<li>此时我们需要三个依赖来进行ES6语法的翻译</li>
<li>babel-loader，babel-core，babel-preset-env</li>
<li><code>babel-core</code>和<code>babel-preset-env</code>的作用是辅助<code>babel-loader</code>进行翻译的，<code>babel-core</code>指的是编译和翻译语言核心部分，</li>
<li><code>babelpreset-env</code>表示翻译ES6的新语法</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install babel-loader@7 babel-core babel-preset-env -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 识别.js结尾的文件</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        <span class="comment">// 不需要识别/翻译node_modules文件夹内部的内容</span></span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="comment">// 使用的loader</span></span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">            <span class="comment">// 指导babel-loader进行翻译的配置工具</span></span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">presets</span>: [<span class="string">&#x27;env&#x27;</span>] <span class="comment">// env 指的是ECMAScript New Version（ES的新版本）</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="语法检查eslint"><a href="#语法检查eslint" class="headerlink" title="语法检查eslint"></a>语法检查eslint</h3><ol>
<li>协同开发大多数公司都会有语发规范，此时可以借助<code>eslint</code>来辅助我们进行开发，<code>webpack</code>可以进行相关的配置</li>
<li>我们从<code>npm</code>中找相关的配置，我们借助<code>eslint-config-airbnb-base</code>来辅助我们完成语法检查</li>
<li>地址：<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/eslint-config-airbnb-base">https://www.npmjs.com/package/eslint-config-airbnb-base</a></li>
</ol>
<blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>index.js 文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a,b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">100</span>,<span class="number">200</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>我们需要安装四个依赖</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install eslint-loader eslint-config-airbnb-base eslint eslint-plugin-import -D</span><br></pre></td></tr></table></figure>
<ol>
<li>webpack.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;eslint-loader&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>package.json文件也要进行配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;name&quot;</span>: <span class="string">&quot;webpack-test&quot;</span>,</span><br><span class="line">  <span class="string">&quot;version&quot;</span>: <span class="string">&quot;1.0.0&quot;</span>,</span><br><span class="line">  <span class="string">&quot;description&quot;</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="string">&quot;main&quot;</span>: <span class="string">&quot;index.js&quot;</span>,</span><br><span class="line">  <span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;test&quot;</span>: <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;author&quot;</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="string">&quot;license&quot;</span>: <span class="string">&quot;ISC&quot;</span>,</span><br><span class="line">  <span class="string">&quot;devDependencies&quot;</span>: &#123;</span><br><span class="line">    …</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;eslintConfig&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;extends&quot;</span>: <span class="string">&quot;airbnb-base&quot;</span>,</span><br><span class="line">    <span class="string">&quot;env&quot;</span>: &#123;</span><br><span class="line">      <span class="string">&quot;browser&quot;</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>接下来进行<code>webpack</code>会有语法检查</li>
<li>我们可以让<code>Eslint</code>自动帮我们修复</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    …</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;eslint-loader&#x27;</span>,</span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="attr">fix</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    …</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们再次编译就不会报错了</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">100</span>, <span class="number">200</span>));</span><br></pre></td></tr></table></figure>
<ol>
<li>但是还是会有警告</li>
<li>警告是不希望有console.log输出，我们可以使用注释命令不识别下一行</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 下一行不会被eslint检查</span></span><br><span class="line"><span class="comment">// eslint-disable-next-line</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">100</span>, <span class="number">200</span>));</span><br></pre></td></tr></table></figure>
<h2 id="JS文件和HTML文件的压缩"><a href="#JS文件和HTML文件的压缩" class="headerlink" title="JS文件和HTML文件的压缩"></a>JS文件和HTML文件的压缩</h2><h3 id="JS文件的压缩"><a href="#JS文件的压缩" class="headerlink" title="JS文件的压缩"></a>JS文件的压缩</h3><blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>index.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 下一行不会被eslint检查</span></span><br><span class="line"><span class="comment">// eslint-disable-next-line</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">100</span>, <span class="number">200</span>));</span><br></pre></td></tr></table></figure>
<ol>
<li>webpack.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line"></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    …</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 打包模式为production就会自动压缩代码</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时进行<code>webpack</code>打包</li>
<li>打包后的<code>build/build.js</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">300</span>);</span><br></pre></td></tr></table></figure>
<h3 id="HTML文件的压缩"><a href="#HTML文件的压缩" class="headerlink" title="HTML文件的压缩"></a>HTML文件的压缩</h3><ol>
<li>HTML文件的压缩是在<code>html-webpack-plugin</code>内部进行配置</li>
<li>打包之前的<code>html</code>文件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 注释1 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-webpack<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 注释2 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 注释3 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>此时进行<code>webpack.config.js</code>配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;bluid.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 智能合并路径，绝对路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line"></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// 配置html的文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span>,</span><br><span class="line">      <span class="comment">// 压缩HTML代码</span></span><br><span class="line">      <span class="attr">minify</span>: &#123;</span><br><span class="line">        <span class="comment">// 移除所有的空格</span></span><br><span class="line">        <span class="attr">collapseWhitespace</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="comment">// 移除注释</span></span><br><span class="line">        <span class="attr">removeComments</span>: <span class="literal">true</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line"></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="配置打包图片资源"><a href="#配置打包图片资源" class="headerlink" title="配置打包图片资源"></a>配置打包图片资源</h2><blockquote>
<p>┣ src</p>
<p>│┣ index.js</p>
<p>│┣ index.css</p>
<p>│┣ dog.jpg</p>
<p>│┣ num.png</p>
<p>│┣ index.html</p>
<p>┣ webpack.config.js</p>
</blockquote>
<h3 id="打包配置CSS资源"><a href="#打包配置CSS资源" class="headerlink" title="打包配置CSS资源"></a>打包配置CSS资源</h3><ol>
<li>此时我们只配置了<code>html</code>的<code>plugin</code>和<code>css</code>的<code>loader</code>。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时<code>index.css</code>文件引入了背景图片</li>
<li>index.css</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">&#x27;./dog.jpg&#x27;</span>);</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> auto;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box1</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">&#x27;./num.png&#x27;</span>);</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>再次编译会报错</li>
<li>错误就是打包图片的时候报错了，此时我们需要配置相关的<code>loader</code>解决这个问题</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install url-loader -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 处理的图片拓展名，此时我们仅仅进行jpg和png格式的拓宽</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// template表示是引入的模板文件地址</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时进行<code>webpack</code>打包的时候就可以实现css图片的识别打包</li>
<li>现在的情况是图片都被<code>webpack</code>进行了打包处理，打包后没有实际的图片，如果需要打包后返回图片，安装<code>file-loader</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install file-loader -D</span><br></pre></td></tr></table></figure>
<ol>
<li>此时的配置，需要增加</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">  <span class="attr">rules</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">      <span class="attr">use</span>: [</span><br><span class="line">        <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">      <span class="comment">// 处理的图片拓展名，此时我们仅仅进行jpg和png格式的拓宽</span></span><br><span class="line">      <span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span>,</span><br><span class="line">      <span class="comment">// 配置项，内部是file-loader的相关处理</span></span><br><span class="line">      <span class="attr">options</span>: &#123;</span><br><span class="line">        <span class="comment">// file-loader必须要设置一个最小量limit，作用是当图片的大小小于这个大小的时候，会自动转为base64格式</span></span><br><span class="line">        <span class="comment">// base64的优点，是不会造成浏览器请求，和我们的文件一块返回</span></span><br><span class="line">        <span class="comment">// 图片体积会变得比原来大</span></span><br><span class="line">        <span class="attr">limit</span>: <span class="number">5</span> * <span class="number">1024</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>返回图片除了<code>base64</code>格式的之外，还会返回一个通过<code>code</code>编码命名的图片</li>
<li>我们可以配置这个图片的规格</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 处理的图片拓展名，此时我们仅仅进行jpg和png格式的拓宽</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span>,</span><br><span class="line">        <span class="comment">// 配置项，内部是file-loader的相关处理</span></span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="comment">// file-loader必须要设置一个最小量limit，作用是当图片的大小小于这个大小的时候，会自动转为base64格式</span></span><br><span class="line">          <span class="comment">// base64的优点，是不会造成浏览器请求，和我们的html文件一块返回</span></span><br><span class="line">          <span class="attr">limit</span>: <span class="number">5</span> * <span class="number">1024</span>,</span><br><span class="line">          <span class="comment">// hash:5表示取code编码的前5位，ext表示取原拓展名</span></span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;[hash:5].[ext]&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="打包配置HTML图片资源"><a href="#打包配置HTML图片资源" class="headerlink" title="打包配置HTML图片资源"></a>打包配置HTML图片资源</h3><ol>
<li><code>HTML</code>文件引入的时候，我们写的是相对路径，此时如果进行打包后，不会识别这个路径，找不到图片</li>
<li>index.html</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>CSS图片资源<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>HTML图片资源<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;./dog.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>img</code>图片引入的是相对路径，经过打包后，图片的所有地址都变换成了绝对路径，所以浏览器中图片的<code>./</code>找不到了</li>
<li>此时我们需要引入<code>html-loader</code>进行图片的处理</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install html-loader -D</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 处理的图片拓展名，此时我们仅仅进行jpg和png格式的拓宽</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span>,</span><br><span class="line">        <span class="comment">// 配置项，内部是file-loader的相关处理</span></span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="comment">// file-loader必须要设置一个最小量limit，作用是当图片的大小小于这个大小的时候，会自动转为base64格式</span></span><br><span class="line">          <span class="comment">// base64的优点，是不会造成浏览器请求，和我们的html文件一块返回</span></span><br><span class="line">          <span class="attr">limit</span>: <span class="number">5</span> * <span class="number">1024</span>,</span><br><span class="line">          <span class="comment">// hash:5表示取code编码的前5位，ext表示取原拓展名</span></span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;[hash:5].[ext]&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 配置编译img标签引入的图片</span></span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;html-loader&#x27;</span>,</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.html$/</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们进行打包后，<code>html</code>文件的<code>img</code>地址会变成下面的样子</li>
<li>原因是<code>url-loader</code>和<code>html-loader</code>解析图片的时候产生了冲突，一个使用了<code>ES6</code>模块解析，一个使用commonjs进行解析。</li>
<li>解决办法是将<code>url-loader</code>的解析模式换成<code>commnjs</code>模式，就是将<code>url-loader</code>的<code>ESModule</code>配置为<code>false</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 处理的图片拓展名，此时我们仅仅进行jpg和png格式的拓宽</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(jpg|png)$/</span>,</span><br><span class="line">        <span class="comment">// 配置项，内部是file-loader的相关处理</span></span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="comment">// file-loader必须要设置一个最小量limit，作用是当图片的大小小于这个大小的时候，会自动转为base64格式</span></span><br><span class="line">          <span class="comment">// base64的优点，是不会造成浏览器请求，和我们的html文件一块返回</span></span><br><span class="line">          <span class="attr">limit</span>: <span class="number">5</span> * <span class="number">1024</span>,</span><br><span class="line">          <span class="comment">// hash:5表示取code编码的前5位，ext表示取原拓展名</span></span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;[hash:5].[ext]&#x27;</span>,</span><br><span class="line">          <span class="comment">// 兼容HTML文件的img标签引入图片</span></span><br><span class="line">          <span class="attr">esModule</span>: <span class="literal">false</span>,</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 配置编译img标签引入的图片</span></span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;html-loader&#x27;</span>,</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.html$/</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<h2 id="置打包其他资源"><a href="#置打包其他资源" class="headerlink" title="置打包其他资源"></a>置打包其他资源</h2><ol>
<li><code>webpack</code>处理其他文件资源，这个资源如果不需要进行二次处理，此时都可以通过<code>file-loader</code>进行打包</li>
<li>比如<code>icon</code>图标</li>
<li>我们在阿里图标库中下载图标</li>
<li>地址：<a target="_blank" rel="noopener" href="https://www.iconfont.cn/">https://www.iconfont.cn/</a></li>
<li>页面中引入了四个图标</li>
<li>将下载下来的资源放到我们<code>src</code>目录下</li>
<li>打开<code>index.html</code>会告诉你如何使用</li>
<li>通过<code>webpack</code>进行配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 配置其他资源,使用file-loader处理其他文件</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 不需要处理的文件拓展名</span></span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/\.(html|js|css)/</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时就可以进<code>行webpack</code>的打包编译了</li>
</ol>
<h2 id="实时编译"><a href="#实时编译" class="headerlink" title="实时编译"></a>实时编译</h2><ol>
<li>我们之前在配置<code>webpack</code>的时候，没有实时编译，每次修改的时候，都需要重新执行<code>webpack</code>命令。</li>
<li>这样效率很低此时可以通过设置<code>watch</code>属性为<code>true</code>，表示实时编译</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 输出文件名</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 输出文件目录</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 实时监听</span></span><br><span class="line">  <span class="attr">watch</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="devServer的配置"><a href="#devServer的配置" class="headerlink" title="devServer的配置"></a>devServer的配置</h2><ol>
<li>前言：由于<code>webpack</code>的版本很多，导致<code>webpack</code>相关的插件也会根据每一个版本出自己的更新版本</li>
<li>所以我们进行配置<code>webpack</code>的时候会遇到版本不兼容的问题，所以如果在练习的时候遇到代码没问题，然后就是会报错</li>
<li>此时八成会出现版本兼容的问题，看报错信息，降低某一个工具的版本</li>
<li>定义: <code>devServer</code>指的是用<code>webpack</code>开发服务器环境，需要注意的是<code>devServer</code>的配置只能在<code>development</code>（开发环境中）</li>
<li>需要安装依赖</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install webpack-dev-server -D</span><br></pre></td></tr></table></figure>
<ol>
<li>我的webpack的相关版本</li>
<li>webpack版本4.41.6</li>
<li>webpack-cli版本3.3.11</li>
<li>webpack-dev-server版本3.10.3</li>
<li>index.html文件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-webpack实时更新<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>看一下<code>webpack.config.js</code> 的基本配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 输出文件名</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 输出文件目录</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="comment">// 项目编译后的路径，代码编译的位置是在计算机的内存中，看不到</span></span><br><span class="line">    <span class="attr">contentBase</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;bluid&#x27;</span>),</span><br><span class="line">    <span class="comment">// 端口号</span></span><br><span class="line">    <span class="attr">port</span>: <span class="number">3000</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时的服务器环境是有实时编译和实时更新的（热更新）</li>
<li>如果需要自动打开浏览器，可以配置<code>open</code>属性为<code>true</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="comment">// 项目编译后的路径，代码编译的位置是在计算机的内存中，看不到</span></span><br><span class="line">    <span class="attr">contentBase</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;bluid&#x27;</span>),</span><br><span class="line">    <span class="comment">// 端口号</span></span><br><span class="line">    <span class="attr">port</span>: <span class="number">3000</span>,</span><br><span class="line">    <span class="comment">// 配置自动打开浏览器</span></span><br><span class="line">    <span class="attr">open</span>: <span class="literal">true</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<h2 id="复习开发环境的配置"><a href="#复习开发环境的配置" class="headerlink" title="复习开发环境的配置"></a>复习开发环境的配置</h2><ol>
<li>我们之前将开发使用相关的基本配置学完了，接下来就是熟悉，我们将重新把我们之前学习相关的<code>webpack</code>的配置重新捋一遍，顺序：<code>HTML、CSS、JS</code>相关、图片和其他资源、<code>devServer</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">MiniCssExtractPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">OptimizeCssAssetsWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&quot;optimize-css-assets-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="comment">// 出口路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>),</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader的配置</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      <span class="comment">// css文件的处理</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="comment">// loader如果是一个使用loader属性，如果是多个使用use数组</span></span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// MiniCssExtractPlugin.loader的作用是提取css文件的</span></span><br><span class="line">          <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">          <span class="comment">// 处理css文件，将css文件处理为js代码</span></span><br><span class="line">          <span class="string">&quot;css-loader&quot;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// eslint语法检查</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        <span class="comment">// 不需要识别/翻译node_modules文件夹内部的内容</span></span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="comment">// 使用的loader</span></span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 指导babel-loader进行翻译的配置工具</span></span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="attr">presets</span>: [<span class="string">&#x27;env&#x27;</span>] <span class="comment">// env 指的是ECMAScript New Version（ES的新版本）</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// es6语法翻译</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        <span class="comment">// 不需要识别/翻译node_modules文件夹内部的内容</span></span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;eslint-loader&#x27;</span>,</span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="attr">fix</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 配置url-loader识别css图片</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(jpg|png)/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="comment">// 小于5kb转为base64的格式</span></span><br><span class="line">          <span class="attr">limit</span>: <span class="number">5</span> * <span class="number">1024</span>,</span><br><span class="line">          <span class="comment">// code命名长度限制</span></span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;[hash:5].[ext]&#x27;</span>,</span><br><span class="line">          <span class="comment">// 输出文件夹</span></span><br><span class="line">          <span class="attr">outputPath</span>: <span class="string">&quot;images&quot;</span>,</span><br><span class="line">          <span class="comment">// 为了配合img图片的引入，将ESModule设置为false</span></span><br><span class="line">          <span class="attr">esModule</span>: <span class="literal">false</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 处理html的img标签的问题</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.html$/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;html-loader&#x27;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 处理其他资源</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 排他处理，我们不处理下面的文件，剩下的都处理</span></span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/\.(html|css|js|less|jpg|png)/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;[hash:5].[ext]&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// html文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 模板路径</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span>,</span><br><span class="line">      <span class="attr">minify</span>: &#123;</span><br><span class="line">        <span class="comment">// 压缩空格</span></span><br><span class="line">        <span class="attr">collapseWhitespace</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="comment">// 移除注释</span></span><br><span class="line">        <span class="attr">removeComments</span>: <span class="literal">true</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="comment">// 提取CSS文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 文件名称</span></span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&quot;build.css&quot;</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="comment">// 压缩css</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">OptimizeCssAssetsWebpackPlugin</span>()</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 开发服务器</span></span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">contentBase</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;build&#x27;</span>),</span><br><span class="line">    <span class="attr">port</span>: <span class="number">3000</span>,</span><br><span class="line">    <span class="attr">open</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>由于<code>webpack</code>的插件兼容问题，建议可以把我的<code>package.json</code>复制下去，<code>install</code>安装，自己写代码</li>
</ol>
<h2 id="生产环境的配置"><a href="#生产环境的配置" class="headerlink" title="生产环境的配置"></a>生产环境的配置</h2><ol>
<li>在<code>node</code>中，有全局变量<code>process</code>表示的是当前的<code>node</code>进程。<code>process.env</code>包含着关于系统环境的信息。</li>
<li>但是<code>process.env</code>中并不存在<code>NODE_ENV</code>这个东西。</li>
<li><code>NODE_ENV</code>是用户一个自定义的变量，在<code>webpack</code>中它的用途是判断或者设置生产环境或开发环境的依据</li>
<li>注意：<ol>
<li>生产环境没有d<code>evServer</code>配置</li>
<li>在生产环境中我们要配置<code>browserslist</code></li>
<li>这个配置能够分享目标浏览器和<code>nodejs</code>版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置</li>
<li>我们可以在<code>package.json</code>中进行配置</li>
</ol>
</li>
<li>我们可以在 <code>package.json</code> 中进行配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可以通过 process.env.NODE_ENV 当前处于什么开发模式</span></span><br><span class="line">process.<span class="property">env</span>.<span class="property">NODE_ENV</span> = <span class="string">&quot;production&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 配置 Webpack 即可</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;browserslist&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line"></span><br><span class="line">    <span class="attr">&quot;development&quot;</span><span class="punctuation">:</span><span class="punctuation">[</span></span><br><span class="line">      <span class="string">&quot;last 1 chorme version&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;last 1 firefox version&quot;</span></span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;production&quot;</span><span class="punctuation">:</span><span class="punctuation">[</span></span><br><span class="line">      <span class="string">&quot;&gt; 1%&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;last 2 versions&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;not ie &lt;= 8&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;since 2013&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;Firefox ESR&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;Firefox 12.1&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;Firefox &gt; 20&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;cover 99.5%&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;unreleased versions&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="string">&quot;defaults&quot;</span></span><br><span class="line">    <span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h2 id="webpack的详细配置"><a href="#webpack的详细配置" class="headerlink" title="webpack的详细配置"></a>webpack的详细配置</h2><ol>
<li>详细配置项参考官网地址: <a target="_blank" rel="noopener" href="https://webpack.docschina.org/configuration/entry-context/">https://webpack.docschina.org/configuration/entry-context/</a></li>
</ol>
<h3 id="entry的详细配置"><a href="#entry的详细配置" class="headerlink" title="entry的详细配置"></a>entry的详细配置</h3><blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ a.js</p>
<p>│┣ b.js</p>
<p>│┣ c.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li><code>entry</code>入口可以有多种形式，我们之前学习的都是参数为字符串类型的</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;production&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时代表<code>webpack</code>的入口文件数量为1个，出口打包好的chunk模块的数量也是一个</li>
<li>你会发现，返回的<code>chunk</code>数量是1个，<code>index.html</code>不属于真正<code>chunk</code>，而是<code>index.js</code>依赖或者引入的模板文件</li>
<li>如果<code>entry</code>入口参数为数组，则表示多个入口文件，但是只会产生一个<code>chunk</code>模块</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: [<span class="string">&quot;./src/index.js&quot;</span>,<span class="string">&quot;./src/a.js&quot;</span>,<span class="string">&quot;./src/b.js&quot;</span>,<span class="string">&quot;./src/c.js&quot;</span>],</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的代码，入口文件一共是<code>4</code>个，都统一放到数组中，每一项是入口文件的<code>路径地址</code></li>
<li>如果<code>entry</code>的入口是一个对象，则表示多个入口对应多个<code>chunk</code>模块</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">fileA</span>: <span class="string">&#x27;./src/a.js&#x27;</span>,</span><br><span class="line">    <span class="attr">fileB</span>: <span class="string">&#x27;./src/b.js&#x27;</span>,</span><br><span class="line">    <span class="attr">fileC</span>: <span class="string">&#x27;./src/c.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">fileA</span>: [<span class="string">&#x27;./src/a.js&#x27;</span>, <span class="string">&#x27;./src/b.js&#x27;</span>],</span><br><span class="line">    <span class="attr">fileC</span>: <span class="string">&#x27;./src/c.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">…</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="output的详细配置"><a href="#output的详细配置" class="headerlink" title="output的详细配置"></a>output的详细配置</h3><blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ index.css</p>
<p>│┣ a.js</p>
<p>│┣ b.js</p>
<p>│┣ c.js</p>
<p>│┣ dog.jpg</p>
<p>┣ webpack.config.js</p>
</blockquote>
<h4 id="filename的配置"><a href="#filename的配置" class="headerlink" title="filename的配置"></a>filename的配置</h4><ol>
<li><code>filename</code>指的是出口文件的名称</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>:<span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件的名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;build.js&quot;</span>,</span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果是字符串命名，针对的是单一<code>chunk</code>模块，如果有多个<code>chunk</code>模块，此时就不能用字符串命名</li>
<li>如果返回的是带有<code>/</code>的字符串，表示的是出口文件是有文件夹层级的</li>
<li>比如：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">  <span class="comment">// 出口文件的名称</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="string">&quot;a/b/c/build.js&quot;</span>,</span><br><span class="line">  <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的代表表示出口的文件是<code>a</code>文件夹内部的b文件夹内部的c文件夹内部的<code>build.js</code>文件中</li>
<li>如果入口<code>entry</code>是多<code>chunk</code>模块</li>
<li>此时我们可以使用动态键表示文件的名称</li>
<li>比如</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">fileA</span>: <span class="string">&quot;./src/a.js&quot;</span>,</span><br><span class="line">    <span class="attr">fileB</span>: <span class="string">&quot;./src/b.js&quot;</span>,</span><br><span class="line">    <span class="attr">fileC</span>: <span class="string">&#x27;./src/c.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件的名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>[]</code>表示动态键，内部的参数是动态的</li>
<li>如果<code>[]</code>的内部是<code>name</code>，表示产生的<code>chunk</code>模块的名称就是多入口设置的名称</li>
<li>如果<code>[]</code>的内部是<code>id</code>，表示产生的<code>chunk</code>模块的<code>id</code>就是多入口设置的名称</li>
<li>如果<code>[]</code>的内部是<code>contenthash</code>，表示产生的<code>chunk</code>模块的<code>hash</code>文件名就是多入口设置的名称</li>
<li>filename的参数也可以是函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">  <span class="comment">// 出口文件的名称</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="function">(<span class="params">pathData</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> pathData.<span class="property">chunk</span>.<span class="property">name</span> === <span class="string">&#x27;main&#x27;</span> ? <span class="string">&#x27;[name].js&#x27;</span> : <span class="string">&#x27;[name]/[name].js&#x27;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="path的配置"><a href="#path的配置" class="headerlink" title="path的配置"></a>path的配置</h4><ol>
<li><code>path</code>配置的是绝对路径，一般我们使用<code>path</code>模块进行辅助配合</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">  <span class="comment">// 出口文件的名称</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">  <span class="comment">// 输出路径</span></span><br><span class="line">  <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;build&#x27;</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>__dirname表示计算机的绝对地址</li>
</ol>
<h4 id="publicPath的配置"><a href="#publicPath的配置" class="headerlink" title="publicPath的配置"></a>publicPath的配置</h4><ol>
<li><code>publicPath</code>表示设置的是相对的路径地址，一般生产环境会用得到</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">  <span class="comment">// 出口文件的名称</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">  <span class="comment">// 输出路径</span></span><br><span class="line">  <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;build&#x27;</span>),</span><br><span class="line">  <span class="attr">publicPath</span>: <span class="string">&quot;/dist/&quot;</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>加了<code>publicPath</code>为<code>/dist/</code>之后，此时所有的静态资源的引入都会加载<code>/dist/</code>前缀</li>
</ol>
<h4 id="chunkFilename的配置"><a href="#chunkFilename的配置" class="headerlink" title="chunkFilename的配置"></a>chunkFilename的配置</h4><ol>
<li>补充import异步请求文件的方法</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">import</span>(<span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">&#123; defult: b &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(b)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>import()</code>函数会返回一个<code>promise</code>对象，通过<code>then</code>来获取值，此时表示异步请求数据</li>
<li>这样的好处就是可以按需加载</li>
<li>异步和同步的区别就是同步一打开文件就必须加载，异步是按需要进行加载</li>
<li>比如异步的小例子：随机数如果为偶数则表示请求文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">10</span>)</span><br><span class="line"><span class="keyword">if</span> (num % <span class="number">2</span>==<span class="number">0</span>) &#123;</span><br><span class="line">  <span class="title function_">import</span>(<span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">&#123; defult: b &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(b)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>chunkFilename</code> 表示非入口文件的引用异步加载生成<code>chunk</code>的重命名</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">  <span class="comment">// 出口文件的名称</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">  <span class="comment">// 输出路径</span></span><br><span class="line">  <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;build&#x27;</span>),</span><br><span class="line">  <span class="comment">// publicPath: &quot;/dist/&quot;</span></span><br><span class="line">  <span class="attr">chunkFilename</span>:<span class="string">&quot;[name]_chunk.js&quot;</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>index.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">import</span>(<span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">&#123; defult: b &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(b)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="module的详细配置"><a href="#module的详细配置" class="headerlink" title="module的详细配置"></a>module的详细配置</h3><ol>
<li>我们这里讲的是<code>rules</code>的详细配置项</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 正则匹配文件类型</span></span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="comment">// 使用loader名称，单个loader，和use属性互斥使用</span></span><br><span class="line">        <span class="attr">loaser</span>:<span class="string">&quot;css-loader&quot;</span>,</span><br><span class="line"></span><br><span class="line">        <span class="comment">// use是一个数组，内部的参数表示的是使用loader名称，多个loader，和loader属性互斥使用</span></span><br><span class="line">        <span class="attr">loader</span>:<span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">        <span class="comment">// 只检查某个文件夹下面的文件</span></span><br><span class="line">        <span class="attr">include</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;src&#x27;</span>),</span><br><span class="line">        <span class="comment">// 不检查某个文件夹下面的文件</span></span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="comment">// enforce的值如果是pre表示所有的loader优先执行，注意只能有一个pre</span></span><br><span class="line">        <span class="attr">enforce</span>: <span class="string">&quot;pre&quot;</span>,</span><br><span class="line">        <span class="comment">// enforce的值如果是post表示所有的loader延后执行，注意只能有一个post</span></span><br><span class="line">        <span class="comment">// enforce: &quot;post&quot;,</span></span><br><span class="line">        <span class="comment">// 某个loader自己的详细配置</span></span><br><span class="line">        <span class="attr">options</span>: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">        <span class="attr">include</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;src&#x27;</span>),</span><br><span class="line">        <span class="comment">// oneOf表示多个匹配，指的是如果匹配到了一个就不继续匹配了</span></span><br><span class="line">        <span class="attr">oneOf</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">use</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">          &#125;,</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">use</span>: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">          &#125;</span><br><span class="line">        ],</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h3 id="resolve的详细配置"><a href="#resolve的详细配置" class="headerlink" title="resolve的详细配置"></a>resolve的详细配置</h3><blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ d.js</p>
<p>││┣ a</p>
<p>│││┣ b</p>
<p>││││┣ c.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<h4 id="alias的配置"><a href="#alias的配置" class="headerlink" title="alias的配置"></a>alias的配置</h4><ol>
<li><code>alias</code>参数是一个对象，内部表示要设置的别名，一般是绝对路径的别名</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件的名称</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line"></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">alias</span>: &#123;</span><br><span class="line">      <span class="comment">// 别名的设置</span></span><br><span class="line">      <span class="string">&quot;@&quot;</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./src&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中@就是别名，此时可以替代<code>src</code>文件夹</li>
<li>比如<code>c.js</code>文件的引入<code>d.js</code>，使用别名之前</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; d &#125; <span class="keyword">from</span> <span class="string">&quot;../../d.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d,<span class="string">&quot;d的结果&quot;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>使用别名之后</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; d &#125; <span class="keyword">from</span> <span class="string">&quot;@/d.js&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d,<span class="string">&quot;d的结果&quot;</span>)</span><br></pre></td></tr></table></figure>
<h4 id="extensions的配置"><a href="#extensions的配置" class="headerlink" title="extensions的配置"></a>extensions的配置</h4><p>1.<code>extensions</code>表示的是可省略的文件拓展名，参数是一个数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">resolve</span>: &#123;</span><br><span class="line">  <span class="attr">alias</span>: &#123;</span><br><span class="line">    <span class="comment">// 别名的设置</span></span><br><span class="line">    <span class="string">&quot;@&quot;</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./src&quot;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">extensions</span>:[<span class="string">&#x27;.js&#x27;</span>,<span class="string">&#x27;json&#x27;</span>]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>此时文件中再引入<code>js</code>和<code>json</code>文件的时候就可以不写.<code>js</code>或者.<code>json</code>了</li>
<li>比如<code>c.js</code>文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; d &#125; <span class="keyword">from</span> <span class="string">&quot;@/d&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d,<span class="string">&quot;d的结果&quot;</span>)</span><br></pre></td></tr></table></figure>
<h4 id="modules的配置"><a href="#modules的配置" class="headerlink" title="modules的配置"></a>modules的配置</h4><ol>
<li><code>modules</code>的配置是优化配置-告诉<code>webpack</code>去什么目录下查找<code>node_modules</code>文件夹</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">resolve</span>: &#123;</span><br><span class="line">  <span class="attr">alias</span>: &#123;</span><br><span class="line">    <span class="comment">// 别名的设置</span></span><br><span class="line">    <span class="string">&quot;@&quot;</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;./src&quot;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">extensions</span>: [<span class="string">&#x27;.js&#x27;</span>, <span class="string">&#x27;json&#x27;</span>],</span><br><span class="line">  <span class="comment">// 优化配置-告诉webpack去什么目录下查找node_modules文件夹</span></span><br><span class="line">  <span class="attr">modules</span>: [path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;src&#x27;</span>), <span class="string">&#x27;node_modules&#x27;</span>]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h3 id="devServer的详细配置"><a href="#devServer的详细配置" class="headerlink" title="devServer的详细配置"></a>devServer的详细配置</h3><blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ a.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>先来复习一下之前我们学习的<code>devServer</code>的配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    …</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    …</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    …</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">// 开发服务器环境</span></span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="comment">// 运行代码的目录</span></span><br><span class="line">    <span class="attr">contentBase</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>),</span><br><span class="line">    <span class="comment">// 端口号</span></span><br><span class="line">    <span class="attr">port</span>: <span class="number">3000</span>,</span><br><span class="line">    <span class="comment">// 自动打开浏览器</span></span><br><span class="line">    <span class="attr">open</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时运行命名</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack-dev-server</span><br></pre></td></tr></table></figure>
<h4 id="host域名的配置"><a href="#host域名的配置" class="headerlink" title="host域名的配置"></a>host域名的配置</h4><ol>
<li>host是配置域名</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&quot;127.0.0.1&quot;</span>,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="compress启动压缩"><a href="#compress启动压缩" class="headerlink" title="compress启动压缩"></a>compress启动压缩</h4><ol>
<li>配置<code>compress</code>进行服务启动压缩，开启<code>gzip</code>的压缩，开启<code>gzip</code>之后，内容是原来的<code>21%</code>体积</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">compress</span>: <span class="literal">true</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="watchContentBase监听目录"><a href="#watchContentBase监听目录" class="headerlink" title="watchContentBase监听目录"></a>watchContentBase监听目录</h4><ol>
<li>告诉 <code>dev-server</code> 监听选项提供的文件。 默认情况下禁用。 启用后，文件更改将触发整个页面重新加载</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">watchConetentBase</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="watchOptions-监听配置"><a href="#watchOptions-监听配置" class="headerlink" title="watchOptions 监听配置"></a>watchOptions 监听配置</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 开发服务器环境</span></span><br><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  ..</span><br><span class="line">  <span class="attr">watchOptions</span>: &#123;</span><br><span class="line">    <span class="comment">// 忽略监听的文件内容</span></span><br><span class="line">    <span class="attr">ignored</span>: <span class="regexp">/node_modules/</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="clientLogLevel-客户端日志"><a href="#clientLogLevel-客户端日志" class="headerlink" title="clientLogLevel 客户端日志"></a>clientLogLevel 客户端日志</h4><ol>
<li>可能会导致日志过于冗余，可以通过将其设置为 <code>silent</code> 来关闭日志。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  ..</span><br><span class="line">  <span class="comment">// 客户端信息的配置</span></span><br><span class="line">  <span class="attr">clientLogLevel</span>: <span class="string">&quot;silent&quot;</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="stats编辑器信息管理"><a href="#stats编辑器信息管理" class="headerlink" title="stats编辑器信息管理"></a>stats编辑器信息管理</h4><ol>
<li>如果需要一些捆绑软件信息，但又不是全部，这可能是一个很好的中间立场。</li>
<li>可能的配置<code>&#39;none&#39;</code> | <code>&#39;errors-only&#39;</code> | <code>&#39;minimal&#39;</code> | <code>&#39;normal&#39;</code> | <code>&#39;verbose&#39; object</code></li>
<li>比如值抛出错误信息</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 开发服务器环境</span></span><br><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">stats</span>: <span class="string">&#x27;errors-only&#x27;</span>,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h3 id="quiet的静谧状态"><a href="#quiet的静谧状态" class="headerlink" title="quiet的静谧状态"></a>quiet的静谧状态</h3><ol>
<li>除了显示初始信息之外，什么都不会写入编辑器控制台。 这也意味着来自<code>webpack</code>的错误或警告是不可见的。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  quiet :<span class="literal">true</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="proxy的代理（★）"><a href="#proxy的代理（★）" class="headerlink" title="proxy的代理（★）"></a>proxy的代理（★）</h4><ol>
<li>前端开发的难题之一就是跨域的问题，什么是跨域？浏览器和服务器之间的访问权限的问题</li>
<li>跨域就是解决同源策略的问题</li>
<li>比如<a target="_blank" rel="noopener" href="https://music.163.com/?from=itab">music.163.com/?from=itab</a>访问<a target="_blank" rel="noopener" href="http://www.baidu.com">www.baidu.com</a>的接口是不合法的，因为不在同一个<code>域</code>下面，再比如<code>127.0.0.1:3000</code>访问</li>
<li>127.0.0.1:5000也是不合法的，因为<code>端口</code>不一致</li>
<li><code>webpack</code>可以解决跨域的问题，通过<code>proxy</code>进行代理跨域</li>
<li>什么是代理跨域？</li>
<li>代理跨域就是服务器向服务器之间发送请求，服务器之间的请求是没有跨域的，只有浏览器向服务器请求才有跨域，所以<code>devServer</code>是开发服务器的，此时可以借助这一个功能帮助我们完成跨域</li>
<li>我们新建一个<code>js</code>文件用来设置请求信息，此时注意要先安装<code>express</code>然后运行目录不要有中文</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&quot;/api/getNum&quot;</span>, <span class="keyword">function</span> (<span class="params">req, res</span>) &#123;</span><br><span class="line">  res.<span class="title function_">json</span>(&#123;<span class="attr">a</span>:<span class="number">1000</span>&#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们的接口地址<code>127.0.0.1:3000/api/getNum</code></li>
<li>我们在<code>index.js</code>文件中进行请求</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//网上找的封装好的ajax的代码不用看</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Ajax</span> = &#123;</span><br><span class="line">  <span class="attr">get</span>: <span class="keyword">function</span> (<span class="params">url, fn</span>) &#123;</span><br><span class="line">    <span class="comment">// XMLHttpRequest对象用于在后台与服务器交换数据</span></span><br><span class="line">    <span class="keyword">var</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">    xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, url, <span class="literal">true</span>);</span><br><span class="line">    xhr.<span class="property">onreadystatechange</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// readyState == 4说明请求已完成</span></span><br><span class="line">      <span class="keyword">if</span> (xhr.<span class="property">readyState</span> == <span class="number">4</span> &amp;&amp; xhr.<span class="property">status</span> == <span class="number">200</span> || xhr.<span class="property">status</span> == <span class="number">304</span>) &#123;</span><br><span class="line">        <span class="comment">// 从服务器获得数据</span></span><br><span class="line">        fn.<span class="title function_">call</span>(<span class="variable language_">this</span>, xhr.<span class="property">responseText</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    xhr.<span class="title function_">send</span>();</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// datat应为&#x27;a=a1&amp;b=b1&#x27;这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式</span></span><br><span class="line">  <span class="attr">post</span>: <span class="keyword">function</span> (<span class="params">url, data, fn</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">    xhr.<span class="title function_">open</span>(<span class="string">&quot;POST&quot;</span>, url, <span class="literal">true</span>);</span><br><span class="line">    <span class="comment">// 添加http头，发送信息至服务器时内容编码类型</span></span><br><span class="line">    xhr.<span class="title function_">setRequestHeader</span>(<span class="string">&quot;Content-Type&quot;</span>, <span class="string">&quot;application/x-www-form-urlencoded&quot;</span>);</span><br><span class="line">    xhr.<span class="property">onreadystatechange</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (xhr.<span class="property">readyState</span> == <span class="number">4</span> &amp;&amp; (xhr.<span class="property">status</span> == <span class="number">200</span> || xhr.<span class="property">status</span> == <span class="number">304</span>)) &#123;</span><br><span class="line">        fn.<span class="title function_">call</span>(<span class="variable language_">this</span>, xhr.<span class="property">responseText</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    xhr.<span class="title function_">send</span>(data);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Ajax</span>.<span class="title function_">get</span>(<span class="string">&quot;http://127.0.0.1:3000/api/getNum&quot;</span>,<span class="keyword">function</span>(<span class="params">result</span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(result,<span class="string">&#x27;输出结果&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时会报错</li>
<li>这个时候我们可以配置<code>devServer</code>的<code>proxy</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">…</span><br><span class="line">  <span class="attr">proxy</span>: &#123;</span><br><span class="line">    <span class="comment">// 代理的前缀，一旦请求地址是/api开头的，此时就会自动走代理请求</span></span><br><span class="line">    <span class="string">&#x27;/api&#x27;</span>: &#123;</span><br><span class="line">      <span class="comment">// 代理到的服务器地址</span></span><br><span class="line">      <span class="string">&quot;target&quot;</span>: <span class="string">&quot;http://127.0.0.1:3000&quot;</span>,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>此时就可以访问并请求了</li>
<li>还可以设置，请求path重写，比如后端实际上是没有固定前缀的，比如专门为了跨域加一个<code>/api</code>前缀。此时我们可以设置代理重写</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">proxy</span>: &#123;</span><br><span class="line">  <span class="comment">// 代理的前缀，一旦请求地址是/api开头的，此时就会自动走代理请求</span></span><br><span class="line">  <span class="string">&#x27;/api&#x27;</span>: &#123;</span><br><span class="line">    <span class="comment">// 代理到的服务器地址</span></span><br><span class="line">    <span class="string">&quot;target&quot;</span>: <span class="string">&quot;http://127.0.0.1:3000&quot;</span>,</span><br><span class="line">    <span class="comment">// 替换掉前缀</span></span><br><span class="line">    <span class="string">&quot;pathRewrite&quot;</span>: &#123;</span><br><span class="line">      <span class="string">&quot;^/api&quot;</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时的请求实际上是<code>http://127.0.0.1:3000/getNum；</code>就不带<code>/api</code>前缀了</li>
</ol>
<h3 id="devtool的详细配置"><a href="#devtool的详细配置" class="headerlink" title="devtool的详细配置"></a>devtool的详细配置</h3><blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ js</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>当<code>webpack</code>进行打包的时候，可能会遇到错误和警告信息，那么此时信息的位置很重要。</li>
<li>比如我们一共有<code>a.js</code>、<code>b.js</code>、<code>c.js</code>三个文件，通过<code>webpack</code>后会打包到<code>build.js</code>文件中。</li>
<li>此时<code>a.js</code>文件中有错误信息，但是提示信息会在<code>build.js</code>文件中输出，并且输出结果是通过打包编译甚至是压缩后的结果，对我们实际上是没有帮助的。</li>
<li><code>JavaScript</code>提供了<code>source mao</code>的功能，将编译后的代码映射到原始代码中。此时可以配置<code>webpack</code>来进行文件追踪。比如一个错误来自<code>a.js</code>文件，<code>source map</code>就会告诉你</li>
<li>不同的<code>devtool</code>配置会导致打印和输出的结果不同</li>
</ol>
<h4 id="none的状态"><a href="#none的状态" class="headerlink" title="none的状态"></a>none的状态</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">devtool</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line"> …</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>输出结果是<code>build.js</code>文件的结果，也就是打包之后的结果，所以<code>none</code>表示没有任何的配置，<code>build</code>文件中没有任何的执行代码</li>
</ol>
<h4 id="eval的状态（默认状态）"><a href="#eval的状态（默认状态）" class="headerlink" title="eval的状态（默认状态）"></a>eval的状态（默认状态）</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;eval&#x27;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>设置这个状态表示所有的执行都在<code>build.js</code>文件中，此时的控制台输出是打包前的文件</li>
</ol>
<h4 id="source-map的状态"><a href="#source-map的状态" class="headerlink" title="source-map的状态"></a>source-map的状态</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;source-map&#x27;</span>,</span><br></pre></td></tr></table></figure>
<ol>
<li>该状态，打包之后会发现<code>dist</code>文件夹（打包后的文件夹）目录下多了一个<code>build.js.map</code>文件，此文件记录了<code>sourceMap</code>信息，也就是如何映射源代码的信息</li>
<li>所有的相关引入都会<code>sources</code>数组中</li>
<li>build.js.map</li>
<li><code>build.js</code>文件中也会有注释，内容是告诉你这个文件的映射文件是哪个</li>
<li>控制台中输出的也是打包前的文件地址</li>
</ol>
<h4 id="hidden-source-map的状态"><a href="#hidden-source-map的状态" class="headerlink" title="hidden-source-map的状态"></a>hidden-source-map的状态</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;hidden-source-map&#x27;</span>,</span><br></pre></td></tr></table></figure>
<ol>
<li>也会生成一个<code>build.js.map</code>文件</li>
<li>和<code>source-map</code>的不同是<code>build.js</code>最后没有了注释，并且浏览器的输出信息是<code>build.js</code>的位置，也就是打包后位置</li>
</ol>
<h3 id="inline-source-map的状态"><a href="#inline-source-map的状态" class="headerlink" title="inline-source-map的状态"></a>inline-source-map的状态</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;inline-source-map&#x27;</span>,</span><br></pre></td></tr></table></figure>
<ol>
<li>你会发现，打包后没有了<code>build.js.map</code>文件，而是在<code>build.js</code>文件的最后加了注释，注释的内容就是<code>sourceMap</code>文件的地址</li>
<li>浏览中打印的是打包前的文件路径</li>
</ol>
<h4 id="eval-source-map的状态"><a href="#eval-source-map的状态" class="headerlink" title="eval-source-map的状态"></a>eval-source-map的状态</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;eval-source-map&#x27;</span>,</span><br></pre></td></tr></table></figure>
<ol>
<li>打包后的<code>build</code>文件是通过<code>eval</code>命名执行的</li>
<li>浏览器中打印的是打包前的文件路径，但是文件加了编号</li>
</ol>
<h4 id="cheap-source-map-的状态"><a href="#cheap-source-map-的状态" class="headerlink" title="cheap-source-map 的状态"></a>cheap-source-map 的状态</h4><ol>
<li><code>eval-cheap-source-map -</code> 类似 <code>eval-source-map</code>，每个模块使用 <code>eval()</code> 执行。</li>
<li>这是 “<code>cheap(低开销)</code>“ 的 <code>source map</code>，因为它没有生成列映射(<code>column mapping</code>)，只是映射行数。</li>
<li>它会忽略源自 <code>loader</code> 的 <code>source map</code>，并且仅显示转译后的代码，就像 <code>eval devtool</code>。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;cheap-source-map&#x27;</span>,</span><br></pre></td></tr></table></figure>
<ol>
<li>和<code>sources-map</code>类似，<code>cheap-source-map</code>生产的<code>build.js.map</code>文件内容比<code>csource-map</code>生产的<code>build.js.map</code>文件的内容要少，并且<code>build.js</code>文件的最后也有<code>sourceMap</code>文件的路径，浏览器显示的也是打包前的文件路径</li>
</ol>
<h4 id="cheap-module-source-map-的状态"><a href="#cheap-module-source-map-的状态" class="headerlink" title="cheap-module-source-map 的状态"></a>cheap-module-source-map 的状态</h4><ol>
<li>并且，在这种情况下，源自 <code>loader</code> 的 <code>source map</code> 会得到更好的处理结果。然而，<code>loader source map</code> 会被简化为每行一个映射</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devtool</span>: <span class="string">&#x27;cheap-module-source-map&#x27;</span>,</span><br></pre></td></tr></table></figure>
<ol>
<li>和<code>sources-map</code>类似，<code>cheap-source-map</code>生产的<code>build.js.map</code>文件内容比<code>csource-map</code>生产的<code>build.js.map</code>文件的内容要少，并且<code>build.js</code>文件的最后也有<code>sourceMap</code>文件的路径，浏览器显示的也是打包前的文件路径</li>
<li>总结：</li>
<li>开发推荐使用：eval、eval-source-map、cheap-eval-source-map、cheap-module-eval-source-map</li>
<li>生产推荐使用：none、source-map、hidden-source-map、inline-source-map</li>
</ol>
<h2 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h2><h3 id="HMR热替换"><a href="#HMR热替换" class="headerlink" title="HMR热替换"></a>HMR热替换</h3><ol>
<li>HMR的配置只适用于开发环境，因为生产环境没有<code>devServer</code></li>
</ol>
<blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ index.css</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>我之前使用的开发环境，如果修改了其中一个文件的代码，保存之后所有的文件都会进行一次重新编译，比如我们修改了<code>css</code>代码，但是<code>js</code>文件没有进行修改，但是保存之后，<code>js</code>文件也会重新进行编译</li>
<li>index.html文件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好ih-webpack<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.css文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">div&#123;</span><br><span class="line">  <span class="attr">width</span>: 200px;</span><br><span class="line">  <span class="attr">height</span>: 200px;</span><br><span class="line">  <span class="attr">border</span>:1px solid #<span class="number">000</span>;</span><br><span class="line">  <span class="attr">margin</span>: 10px;</span><br><span class="line">  <span class="attr">background</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>index.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./index.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">&quot;./a.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br></pre></td></tr></table></figure>
<ol>
<li>a.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> a = <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时你会发现，不仅仅背景颜色发生了改变，并且<code>a.js</code>的随机数也发生了变化，这是因为一个文件发生了变化，所有的文件都重新编译了</li>
<li>此时要设置热替换：也就是修改哪个文件，替换掉哪个文件，其他的文件不更新</li>
</ol>
<h4 id="css文件的热更新"><a href="#css文件的热更新" class="headerlink" title="css文件的热更新"></a>css文件的热更新</h4><ol>
<li>此时只需要配置<code>devServer</code>的<code>hot</code>属为<code>true</code>即可</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  <span class="attr">contentBase</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;build&#x27;</span>),</span><br><span class="line">  <span class="attr">port</span>: <span class="number">3000</span>,</span><br><span class="line">  <span class="attr">open</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">hot</span>: <span class="literal">true</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是，<code>css</code>文件必须要使用<code>style-loader</code>，因为<code>style-loader</code>内部实现了相关的<code>HMR</code>的功能。我们之前的提取<code>css</code>文件<code>mini-css-extract-plugin</code>的<code>loader</code>是不能实现的</li>
<li>此时我们将<code>index.css</code>文件的颜色变为粉色，<code>js</code>文件的随机数也没有发生变化</li>
</ol>
<h4 id="js文件的热替换"><a href="#js文件的热替换" class="headerlink" title="js文件的热替换"></a>js文件的热替换</h4><ol>
<li><code>js</code>文件默认是没有热替换的，此时我们再新建一个<code>b.js</code>文件，和<code>a.js</code>文件是同目录</li>
<li>b.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> b = <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>index.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./index.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">&quot;./a.js&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123;b&#125; <span class="keyword">from</span> <span class="string">&quot;./b.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a,<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b,<span class="string">&#x27;b&#x27;</span>);</span><br></pre></td></tr></table></figure>
<ol>
<li>随意修改任意一个<code>js</code>文件，所有的文件都会进行重新编译</li>
<li>此时我可以在入口文件中配置热更新的相关代码</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./index.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">&quot;./a.js&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123;b&#125; <span class="keyword">from</span> <span class="string">&quot;./b.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a,<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b, <span class="string">&#x27;b&#x27;</span>);</span><br><span class="line"><span class="comment">// 配置关于热更新的代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="variable language_">module</span>.<span class="property">hot</span>) &#123;</span><br><span class="line">  <span class="comment">// 一旦module.hot为true了，表示开启了HMR的功能</span></span><br><span class="line">  <span class="variable language_">module</span>.<span class="property">hot</span>.<span class="title function_">accept</span>(<span class="string">&quot;./b.js&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// accept方法会监听b.js文件，一旦这个文件发生了变化，此时其他的模块不会再次进行打包编译</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(b, <span class="string">&#x27;b&#x27;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时修改b.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> b = <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">10</span>) + <span class="number">11</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>html</code>文件默认也是没有热替换功能的，并且<code>html</code>文件其实也不需要热替换功能，引入<code>html</code>文件大多数都是入口文件</li>
<li>我们的入口文件一旦进行了修改，势必所有的代码必须进行重新编译，因而<code>index.html</code>文件需要引入<code>css、js</code>等等文件，此时这个文件属于一个入口，一般不需要配置热替换</li>
</ol>
<h3 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h3><ol>
<li>缓存就是读取计算机内存中的文件，作用就是提高代码的性能，因为向计算机读取文件要比向服务器读取文件效率更高，速度更快</li>
</ol>
<blockquote>
<p>│src</p>
<p>│┣ index.js</p>
<p>│┣ index.html</p>
<p>│┣ index.css</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>┣ webpack.config.js</p>
<p>┣ server.js</p>
</blockquote>
<ol>
<li><code>server.js</code>文件的作用就是搭建服务器环境</li>
<li>使用<code>express</code>来搭建</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install –-save express</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&quot;express&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 静态化文件</span></span><br><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">static</span>(<span class="string">&quot;build&quot;</span>, &#123;</span><br><span class="line">  <span class="attr">maxAge</span>: <span class="number">3600</span> * <span class="number">100</span></span><br><span class="line">&#125;))</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;监听3000端口&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>index.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./index.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">&quot;./a.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a,<span class="string">&#x27;a&#x27;</span>);</span><br></pre></td></tr></table></figure>
<ol>
<li>此时进行<code>webpack</code>打包</li>
<li>第一次请求服务器地址127.0.0.1:3000，此时向服务器发送请求</li>
<li>第二次请求服务器地址127.0.0.1:3000，此时读取的缓存文件</li>
<li>此时我们设置修改index.css文件的背景颜色为蓝色</li>
<li>再次进行打包的时候页面的更新是失效的，还是粉色，因为此时会先去读取缓存中的文件，发现有index.css文件所以，不会再去向服务器发送请求，所以不会有代码更新</li>
<li>最粗暴的解决办法就是清除浏览器的缓存，快捷键<code>ctrl+shift+delete</code>，这种不适用真正的应用场景</li>
<li>解决办法就是配置<code>webpack</code>输出文件的命名，可以配置<code>hash</code>值，因为hash值在每一次打包的时候都会生成一个不同且唯一的值（值本身的不同，不是文件的公用性），所以读取缓存中，一定不会和上次的文件名一样</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins</span>: [</span><br><span class="line">  <span class="comment">// html文件</span></span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">    <span class="comment">// 模板路径</span></span><br><span class="line">    <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span>,</span><br><span class="line">    <span class="attr">minify</span>: &#123;</span><br><span class="line">      <span class="comment">// 压缩空格</span></span><br><span class="line">      <span class="attr">collapseWhitespace</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="comment">// 移除注释</span></span><br><span class="line">      <span class="attr">removeComments</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>(&#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;index.[hash:10].css&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">],</span><br></pre></td></tr></table></figure>
<ol>
<li>此时每一次打包<code>css</code>文件的时候都会产生一个新的带着<code>hash</code>值的文件</li>
<li>此时我们给<code>index.js</code>也设置了<code>hash</code>值</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="string">&quot;index.[hash:10].js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口路径</span></span><br><span class="line">  <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>),</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>你会发现打包之后<code>js</code>文件和<code>css</code>文件的<code>hash</code>值是相同的</li>
<li>这是因为在<code>webpack</code>打包的时候会产生一个唯一的<code>hash</code>值，所有的文件共用这个<code>hash</code>值</li>
<li>此时如果我们需要单独设置自己的<code>hash</code>值，可以设置<code>chunkhash</code>，<code>chunkhash</code>表示每一个<code>chunk</code>模块都是单独的<code>hash</code>值</li>
<li>此时我们<code>index.js</code>文件中异步引入<code>b.js</code>文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./index.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">&quot;./a.js&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line"></span><br><span class="line"><span class="title function_">import</span>(<span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>因为异步引入会创建一个独立的<code>chunk</code>模块</li>
<li>我们还可以配置每一个文件自己单独的<code>hash</code>值，配置<code>contenthash</code></li>
<li>我们以<code>output</code>的<code>js</code>文件举例</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;index.[contenthash:10].js&quot;</span>,</span><br><span class="line">    <span class="comment">// 出口路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>),</span><br><span class="line"> &#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>除了文件可以读取缓存之外，<code>babel-loader</code>在编译的时候也可以进行缓存读取，因为<code>babel-loader</code>在运行的时候经常会创建一些冗余（多余的用不到）文件，此时我们可以配置<code>cacheDirectory</code>为<code>true</code>表示配置<code>loader</code>的缓存</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">  <span class="comment">// 不需要识别/翻译node_modules文件夹内部的内容</span></span><br><span class="line">  <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">  <span class="comment">// 使用的loader</span></span><br><span class="line">  <span class="attr">loader</span>: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">  <span class="comment">// 指导babel-loader进行翻译的配置工具</span></span><br><span class="line">  <span class="attr">options</span>: &#123;</span><br><span class="line">    <span class="attr">presets</span>: [<span class="string">&#x27;env&#x27;</span>], <span class="comment">// env 指的是ECMAScript New Version（ES的新版本）</span></span><br><span class="line">    <span class="comment">// 开启读取缓存模式</span></span><br><span class="line">    <span class="attr">cacheDirectory</span>: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="splitChunks-模块分割"><a href="#splitChunks-模块分割" class="headerlink" title="splitChunks-模块分割"></a>splitChunks-模块分割</h3><blockquote>
<p>│src</p>
<p>│┣ index.html</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>我们现在已知的可以进行代码分隔的有两种，一种是多入口，几个入口会生成几个<code>chunk；</code>另一种是异步加载，每一个异步加载就会生成一个<code>chunk；</code></li>
<li><code>webpack</code>打包如果是多个入口，并且引入同一个库，会如何工作？</li>
<li>a.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;$&#125; <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;a文件的jquery&quot;</span>,$);</span><br></pre></td></tr></table></figure>
<ol>
<li>b.js文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; $ &#125; <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;b文件的jquery&quot;</span>, $);</span><br></pre></td></tr></table></figure>
<ol>
<li>webpack.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="string">&quot;a&quot;</span>: <span class="string">&quot;./src/a.js&quot;</span>,</span><br><span class="line">    <span class="string">&quot;b&quot;</span>: <span class="string">&quot;./src/b.js&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  …</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>还需要安装<code>jquery</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install –-save jquery</span><br></pre></td></tr></table></figure>
<ol>
<li>这个时候我们进行<code>webpack</code>打包</li>
<li>你会发现两个文件的大小相同，并且都将<code>jquery</code>打包进去了</li>
<li>引入如果是自己开发的文件的话，大小都是可控的，不会特别大， 但是如果是第三方库（<code>node_modules</code>内部的库）是不可控，每个文件如果都引入了，打包体积会特别大</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  …</span><br><span class="line">  <span class="attr">optimization</span>: &#123;</span><br><span class="line">    <span class="attr">splitChunks</span>: &#123;</span><br><span class="line">      <span class="attr">chunks</span>:<span class="string">&quot;all&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><p><code>splitChunk</code>表示切割<code>chunk</code>模块，<code>chunks</code>的值如果是<code>all</code>，会将文件中引入的<code>node_modules</code>单独打包成一个<code>chunk</code>，也就是说如果我们文件中既引入了<code>jquery</code>，也引入了<code>vue</code>，此时<code>webpack</code>会将这两个打包到一起</p>
</li>
<li><p>成一个<code>chunk</code></p>
</li>
<li><p>此时再次打包</p>
</li>
<li><p>这是因为此时打包将所有的第三方库拆出来了</p>
</li>
<li><p>也就是相当于a.js和b.js引入的是公共资源了</p>
</li>
<li><p>上面的方法是拆分第三方库的，如果我们本地文件也希望可以进行代码的分割，其实就是通过module的异步模块加载的方式实现</p>
<p>此时我们将a.js文件引入b.js文件的变量</p>
</li>
<li><p>a.js:</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">import</span>(<span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">b</span>,<span class="string">&#x27;b的结果&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;a文件&quot;</span>);</span><br></pre></td></tr></table></figure>
<ol>
<li>b.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> b = <span class="number">200</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>webpack.config.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>:<span class="string">&quot;./src/a.js&quot;</span>,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时打包后就会生成两个文件</li>
<li>此时你会发现上面b.js 文件输出chunk名称是1.js，如果需要自定义命名可以单独设置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">import</span>(<span class="comment">/*webpackChunkName: &#x27;fileB&#x27;*/</span><span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">b</span>,<span class="string">&#x27;b的结果&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>/*webpackChunkName: &#39;fileB&#39;*/</code> 属于固定写法，不是注释，内部如果是<code>webpackChunkName</code>表示设置当前的chunk名称</li>
</ol>
<h3 id="dll打包优化"><a href="#dll打包优化" class="headerlink" title="dll打包优化"></a>dll打包优化</h3><blockquote>
<p>│src</p>
<p>│┣ index.html</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>┣ webpack.config.js</p>
<p>┣ webpack.dll.config.js</p>
</blockquote>
<ol>
<li>a. js文件和b.js文件内容：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; $ &#125; <span class="keyword">from</span> <span class="string">&quot;jquery&quot;</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(vue)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>($)</span><br></pre></td></tr></table></figure>
<ol>
<li>我们在5.3小题中发现配置 splitChunks的时候，将所有的第三方库都打包到一个chunk模块中了，这样有一个问题，</li>
<li>每一次重新编译的时候都会进行一次打包，这样如果我们引入的库特别的多，每一次打包的代价会特别大</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">optimization</span>: &#123;</span><br><span class="line">    <span class="attr">splitChunks</span>: &#123;</span><br><span class="line">      <span class="attr">chunks</span>:<span class="string">&quot;all&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><p>dll的优化作用是为了提取出第三方库，目的是webpack进行打包的时候不会将这些库打包进去，如果需要提取，就需要配置这个打包第三方库的文件</p>
</li>
<li><p>webpack.dll.config.js文件的作用就是为了打包第三方库使用的配置，命名不是代码规范，而是业内规范</p>
</li>
<li><p>dll的核心思想就是一劳永逸，只需要初始化的时候，进行一次打包即可， 后面我们开发编辑的代码一定不会在第三方库当做修改</p>
<p>我们看打包之前的文件大小</p>
</li>
<li><p>你会发现上图中打包的大小是157kb，也就是a.js文件和b.js文件都将vue和jquery引入了一遍</p>
</li>
<li><p>webpack.dll.config.js:</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&quot;webpack&quot;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口文件,入口文件必须是数组</span></span><br><span class="line">  <span class="comment">// 将node_modules中的jquery和vue提取出来</span></span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">libs</span>: [<span class="string">&quot;jquery&quot;</span>, <span class="string">&quot;vue&quot;</span>],</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 出口文件</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件名</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">    <span class="comment">// 出口文件的路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;dll&#x27;</span>),</span><br><span class="line">    <span class="comment">// 暴露的变量添加一个hash值</span></span><br><span class="line">    <span class="attr">library</span>: <span class="string">&quot;[name]_[hash]&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> webpack.<span class="title class_">DllPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 映射的目标文件名</span></span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;[name_hash]&quot;</span>,</span><br><span class="line">      <span class="comment">// 映射的文件路径</span></span><br><span class="line">      <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;dll/manifest.json&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>还需要在webpack.config.js 文件中配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> webpack.<span class="title class_">DllReferencePlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 执行哪个指导文件，从而打包的时候忽略node_modules中的哪些库</span></span><br><span class="line">      <span class="attr">manifest</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&quot;dll/manifest.json&quot;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时再次进行webpack打包，大小只有1.09kb</li>
<li>此时你会发现html文件会报错，找不到对应的引入，因为webpack只配置忽略不打包这些文件，但是文件引入找不到地址</li>
<li>此时需要告诉webpack中的html模板文件如何引入文件</li>
<li>安装插件</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install add-assets-html-webpack-plugin -D</span><br></pre></td></tr></table></figure>
<ol>
<li>配置webpack.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// html文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 模板路径</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> webpack.<span class="title class_">DllReferencePlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 执行哪个指导文件，从而打包的时候忽略node_modules中的哪些库</span></span><br><span class="line">      <span class="attr">manifest</span>: <span class="title function_">resolve</span>(__dirname,<span class="string">&quot;dll/manifest.json&quot;</span>)</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="comment">// 会自动将指定目录下的文件复制一份到打包后文件目录下，html文件会自动添加src</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">AddAssetsHtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">filepath</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;dll/libs.js&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br></pre></td></tr></table></figure>
<ol>
<li>此时再次进行webpack打包</li>
</ol>
<h3 id="懒加载和预加载"><a href="#懒加载和预加载" class="headerlink" title="懒加载和预加载"></a>懒加载和预加载</h3><blockquote>
<p>│src</p>
<p>│┣ index.html</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>懒加载功能我们之前接触过，就是module的异步加载模块</li>
<li>什么是懒加载？懒加载就是固定条件下在进行服务器的请求，这样的话页面初始化请求比较快，首屏优化比较好</li>
<li>下面的代码就是懒加载的过程，只有触发条件了才发送请求加载资源</li>
<li>看一下懒加载</li>
<li>webpack.config.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/a.js&quot;</span>,</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>我们使用a.js文件向b.js文件发送请求</li>
<li>下面逻辑是一个随机数，当num能整除的时候再请求b文件的内容</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num = <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">10</span>)</span><br><span class="line"><span class="keyword">if</span> (num % <span class="number">2</span> == <span class="number">0</span>) &#123;</span><br><span class="line">  <span class="title function_">import</span>(<span class="comment">/*webpackChunkName: &#x27;fileB&#x27;*/</span><span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">b</span>, <span class="string">&#x27;b的结果&#x27;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>b.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> b = <span class="number">300</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时页面中关于b文件的请求也是随机的，这个现象就是懒加载</li>
<li>什么是预加载？预加载是初始化的时候就加载，使用的时候用的是加载后缓存</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">import</span>(<span class="comment">/*webpackPrefetch:true*/</span><span class="string">&quot;./b.js&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">b</span>, <span class="string">&#x27;b的结果&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>在异步 请求模块过程中加 /<em>webpackPrefetch:true</em>/，表示当前的文件是预加载的文件，浏览器会在空闲（偷偷的）的时候加载文件，而不是和其他资源请求并发，这样会提高交互效率</li>
</ol>
<h3 id="tree-shaking"><a href="#tree-shaking" class="headerlink" title="tree shaking"></a>tree shaking</h3><blockquote>
<p>│src</p>
<p>│┣ index.html</p>
<p>││┣ a.js</p>
<p>││┣ b.js</p>
<p>││index.css</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>tree shaking（树摇）是代码中的一种技术实现</li>
<li>我们现在实际工作中遇到的一个问题之一就是共享库的数量问题。从简单的自定义的库，到企业级的标准库，其实都是技术债务，其中最大的问题就是所有的应用程序或者模块，都在导入这些库，而实际上每一个模块本身只用到了其中的一小部分</li>
<li>tree shaking就可以帮我们解决</li>
<li>什么是tree shaking？比如一个树上有很多枯树叶，此时我们要想把这些枯萎的树叶从树上分离下来，最好的办法就是摇晃这个树叶；我们从工作中考虑，冗余的代码，就可以理解为枯萎的树叶。</li>
<li>树摇的概念就是去掉冗余的、多余、用不到、没用的代码；</li>
<li>我们当前学习的webpack版本是4版本，这个版本的webpack就能够实现tree shaking功能</li>
<li>实现tree shaking 两个先决条件<ol>
<li>mode为production模式（开发模式）</li>
<li>js文件引用要使用module模式（import <strong> form </strong>）</li>
</ol>
</li>
<li>此时的入口文件是a.js文件</li>
<li>a.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; add &#125; <span class="keyword">from</span> <span class="string">&quot;./b.js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">200</span>,<span class="number">300</span>));</span><br></pre></td></tr></table></figure>
<ol>
<li>b.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;add的方法&quot;</span>);</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">minus</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;minus的方法&quot;</span>);</span><br><span class="line">  <span class="keyword">return</span> a - b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>webpack.config.js：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/a.js&quot;</span>,</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时进行webpack打包</li>
<li>你会发现只有add的方法，minus是没有打包进去</li>
<li>此时我们就说实现了tree shaking功能</li>
<li>我们会发现，代码会有副作用，因为我们的其他文件，比如css文件，此时如果我们没有配置tree shaking，所有的文件都会被引入</li>
<li>我们可以配置package.json文件来决定忽略哪些文件不参与树摇</li>
<li>package.json:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;sideEffects&quot;</span>: <span class="literal">false</span> <span class="comment">//没有忽略，所有文件都参与</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;sideEffects&quot;</span>: <span class="literal">true</span><span class="comment">//所有文件都忽略，不参与树摇</span></span><br></pre></td></tr></table></figure>
<ol>
<li>如果sideEffects为true了会有副作用，比如我们的css文件，此时就不会进行显示了</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果是数组，则表示内部的文件地址不参与树摇，被忽略</span></span><br><span class="line"><span class="string">&quot;sideEffects&quot;</span>: [</span><br><span class="line">    <span class="string">&quot;./15_tree shaking/src/a.js&quot;</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<ol>
<li>如果我们不希望css文件参与树摇，其他的文件可以参与树摇，单独再loader中配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">         <span class="string">&quot;style-loader&quot;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ],</span><br><span class="line">        <span class="attr">sideEffects</span>: <span class="literal">true</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<h2 id="内置插件"><a href="#内置插件" class="headerlink" title="内置插件"></a>内置插件</h2><blockquote>
<p>│src</p>
<p>│┣ index.html</p>
<p>││┣ index.js</p>
<p>┣ webpack.config.js</p>
</blockquote>
<ol>
<li>我们之前学习webpack的插件都是通过npm去安装的，这种是使用外部插件；webpack本身也是有插件的，是通过new webpack.**来实现的</li>
<li>我们之前使用 new webpack.DllReferencePlugin（执行引导文件）和new webpack.DllPlugin（设置引导文件）</li>
<li>接下来我们再学习三个常用的webpack内置的插件</li>
</ol>
<h3 id="DefinePlugin-设置全局变量"><a href="#DefinePlugin-设置全局变量" class="headerlink" title="DefinePlugin 设置全局变量"></a>DefinePlugin 设置全局变量</h3><ol>
<li>webpack.config.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> webpack.<span class="title class_">DefinePlugin</span>(&#123;</span><br><span class="line">      <span class="string">&quot;A&quot;</span>: <span class="number">100</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br></pre></td></tr></table></figure>
<ol>
<li>DefinePlugin内部接收一个对象，内部是全局的配置信息</li>
<li>index.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A,<span class="string">&#x27;全局A&#x27;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们的全局配置是有一些独特规定的</li>
<li>如果是基本类型值，支持数字、布尔值</li>
<li>如果是字符串，比如要多包裹一层字符串</li>
<li>引用类型也是支持的，但是内部如果是字符串，必须也要多包裹一次，也可以使用JSON.stringify整体包裹</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> webpack.<span class="title class_">DefinePlugin</span>(&#123;</span><br><span class="line">      <span class="string">&quot;A&quot;</span>: <span class="number">100</span>, <span class="comment">// 数字类型</span></span><br><span class="line">      <span class="string">&quot;B&quot;</span>: &#123; <span class="string">&quot;aa&quot;</span>: <span class="string">&quot;&#x27;aa&#x27;&quot;</span>, <span class="string">&quot;bb&quot;</span>: <span class="number">11</span> &#125;,</span><br><span class="line">      <span class="string">&quot;C&quot;</span>: [<span class="string">&quot;&#x27;cc&#x27;&quot;</span>, <span class="number">22</span>],</span><br><span class="line">      <span class="string">&quot;D&quot;</span>: <span class="string">&quot;&#x27;你好&#x27;&quot;</span>,</span><br><span class="line">      <span class="string">&quot;E&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="string">&quot;F&quot;</span>: <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123;<span class="attr">a</span>: <span class="string">&#x27;aa&#x27;</span>,<span class="attr">b</span>:<span class="string">&#x27;bb&#x27;</span>&#125;)</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>index.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A, <span class="string">&#x27;全局A&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(B,<span class="string">&quot;全局B&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(C,<span class="string">&quot;全局c&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(D,<span class="string">&quot;全局D&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(E,<span class="string">&quot;全局E&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(F,<span class="string">&quot;全局F&quot;</span>);</span><br></pre></td></tr></table></figure>
<h3 id="ProvidePlugin-设置全局加载模块"><a href="#ProvidePlugin-设置全局加载模块" class="headerlink" title="ProvidePlugin 设置全局加载模块"></a>ProvidePlugin 设置全局加载模块</h3><ol>
<li>我们工作会遇到常引入库，比如jquery，使用插件比较频繁，此时设置全局的进入会比较合理，这样每一个模块不用再单独进行引入</li>
<li>webpack.config.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> webpack.<span class="title class_">ProvidePlugin</span>(&#123;</span><br><span class="line">    <span class="attr">$</span>: <span class="string">&quot;jquery&quot;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><script type="math/tex">`就是替换符，后面的参数就是库，此时就表示用`</script>来代替<code>jquery</code>，可以在全局任意位置使用</li>
<li>index.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>($,<span class="string">&#x27;jquery&#x27;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的index.js文件只有输出没有进行引入</li>
</ol>
<h3 id="BannerPlugin-chunk注释"><a href="#BannerPlugin-chunk注释" class="headerlink" title="BannerPlugin chunk注释"></a>BannerPlugin chunk注释</h3><ol>
<li>工作中的项目打包后如果需要版权说明，可以加通过加注释的方法</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> webpack.<span class="title class_">BannerPlugin</span>(<span class="string">&quot;make by nihao&quot;</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>此后所有的<code>chunk</code>模块顶部都会有这样的注释，通常都是用于公司的版权说明</li>
</ol>
<h1 id="CSS预处理器-Less"><a href="#CSS预处理器-Less" class="headerlink" title="CSS预处理器-Less"></a>CSS预处理器-Less</h1><ol>
<li>什么是<code>CSS</code>的预处理器？</li>
<li>就<code>CSS</code>本身而言，对于大多数Web前端从业人员来说就不是问题。学过<code>CSS</code>的人都知道，它不是一种编程语言。</li>
<li>你可以用它开发网页样式，但是没法用它编程；比如说<code>PHP</code>、<code>Javascript</code>等等，有自己的变量、常量、条件语句以及一些编程语法，<code>CSS</code>只是一行行单纯的属性描述，写起来相当的费事，而且代码难组织和维护。</li>
<li><code>CSS</code>本身很难变得更简洁，更清晰，所以我们之前一直说<code>CSS</code>就是砌墙，没有逻辑性可言，就是一级一级，一层一层的书写CSS样式</li>
<li><code>Less</code> （Leaner Style Sheets 的缩写） 是一门向后兼容的 <code>CSS</code> 扩展语言</li>
<li>Less文档：<a target="_blank" rel="noopener" href="https://less.bootcss.com/">https://less.bootcss.com/</a></li>
<li><code>CSS</code>的预处理器最大的好处就是，即便你不会写预处理器（less、sass等等）方式的代码，写普通的css代码也是可以的</li>
<li>我们现在是结合<code>webpack</code>来进行学习<code>less</code>，所以我们就通过<code>webpack</code>来配置<code>less</code>即可</li>
<li>webpack.config.js:</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="comment">// 出口文件</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&quot;[name].js&quot;</span>,</span><br><span class="line">    <span class="comment">// 出口路径</span></span><br><span class="line">    <span class="attr">path</span>: <span class="title function_">resolve</span>(__dirname, <span class="string">&quot;build&quot;</span>),</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader的配置</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">         <span class="string">&quot;style-loader&quot;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// 识别css-laoder的js字符串为样式代码，添加到head标签</span></span><br><span class="line">          <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">          <span class="comment">// css-loader是将样式的代码翻译为js的模式，内部是样式的字符串</span></span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// less-loader的作用是将less文件变为css文件</span></span><br><span class="line">          <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// html文件</span></span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 模板路径</span></span><br><span class="line">      <span class="attr">template</span>: <span class="string">&quot;./src/index.html&quot;</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>(&#123;</span><br><span class="line">      <span class="comment">// 输出路径</span></span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;index.css&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">//打包模式-默认不写是生产模式</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  <span class="attr">watch</span>: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><ol>
<li>基本使用</li>
<li>index.html</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.less</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span><span class="number">100px</span>;</span><br><span class="line"><span class="variable">@height:</span> <span class="variable">@width</span>+<span class="number">10px</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>编译后的代码index.css:</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">110px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>less</code>使用<code>@</code>当做关键字来定义一个变量，这个变量就可以在<code>css</code>的属性中使用</li>
<li>注意，设置变量后面一定要加<code>分号结尾</code>,否则会报错；</li>
<li>变量也有自己的<code>作用域</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span><span class="number">100px</span>;</span><br><span class="line"><span class="variable">@height:</span> <span class="variable">@width</span>+<span class="number">10px</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="variable">@width:</span> <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中在全局的位置定义了<code>@width</code>为<code>100px</code>，然后在<code>.box</code>中再次定义了<code>@width:200px;</code></li>
<li><code>.box</code>内部的<code>@height</code>是210px，而不是全局<code>@height</code>的<code>110px</code>,这个和JavaScript是有区别的</li>
<li>编译后的代码</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">210px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>变量除了可以设置属性之外，还可以设置<code>选择器</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@selector:</span> .box;</span><br><span class="line"></span><br><span class="line"><span class="variable">@&#123;selector&#125;</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@**</code>设置的变量可以使用 <code>@&#123;**&#125;</code>来获取</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>除了可以设置到选择器之外，还可以设置到<code>css</code>属性中</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@colors:</span> <span class="number">123</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="variable">@colors</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以加到<code>import</code>导入的样式中</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@path:</span> <span class="string">&quot;css&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;./@&#123;path&#125;/bgc.less&quot;</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="number">123</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>bgc.less</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>&#123;</span><br><span class="line">  <span class="attribute">background</span>: paleturquoise;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: paleturquoise;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#64c87b</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="混合"><a href="#混合" class="headerlink" title="混合"></a>混合</h2><ol>
<li>混合（<code>Mixin</code>）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法</li>
<li>混合其实就是设置功能属性，把可复用的提取出来</li>
<li>第一种混合的使用方法</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.less:</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.bordered</span>()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="selector-class">.bordered</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>混合也可以使用选择器进行选择</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bordered&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="selector-class">.bordered</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span>&#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="selector-class">.box</span> <span class="selector-class">.bordered</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中<code>.bordered</code>类在<code>.box</code>中，如果<code>.box2</code>需要使用，此时就需要使用<code>css</code>的后代选择器进行选择；<code>.box</code> <code>.bordered()</code>就相当于选到了<code>.box</code>内部的<code>.bordered</code></li>
<li>后代选择器也可以这样写</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> <span class="selector-class">.bordered</span>()</span><br><span class="line">等价于</span><br><span class="line"><span class="selector-class">.box</span>&gt;<span class="selector-class">.bordered</span>()</span><br></pre></td></tr></table></figure>
<ol>
<li>混合还有第二种写法</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span>() &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="selector-class">.bordered</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="selector-class">.bordered</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>.bordered()</code>代表的就是定义一个函数，这种写法的最大好处就是谁调用，给谁添加代码，不会增加全局代码</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>混合的属性/函数是可以加<code>!important</code>关键字的</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span>() &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid orchid;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="selector-class">.bordered</span>!important;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>编译之后的这个类/函数内部所有的属性都会带着<code>!important</code>关键字</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orchid <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>混合</code>也可以携带参数</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span>(<span class="variable">@width</span>,<span class="variable">@style</span>,<span class="variable">@color</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="variable">@width</span> <span class="variable">@style</span> <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.bordered</span>(<span class="number">2px</span>; solid; deeppink)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid deeppink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>函数内部也有默认参数</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span>(<span class="variable">@width</span>,<span class="variable">@style</span>,<span class="variable">@color</span>:orange) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="variable">@width</span> <span class="variable">@style</span> <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.bordered</span>(<span class="number">2px</span>; solid;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中，<code>.bordered</code>函数中第三个参数<code>@color</code>定义了默认参数为<code>orange</code></li>
<li><code>.box</code>内部调用<code>.bordered</code>函数时只传了前两个参数</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>函数内部的参数也是可以不按照顺序传的</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bordered</span>(<span class="variable">@width</span>,<span class="variable">@style</span>,<span class="variable">@color</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="variable">@width</span> <span class="variable">@style</span> <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.bordered</span>(<span class="variable">@color</span>: purple; <span class="variable">@width</span>: <span class="number">2px</span>; <span class="variable">@style</span>: dashed)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>.box</code>内部调用<code>.bordered</code>时候是可以不按照顺序传递的，此时前面一定要加上赋值属性名</li>
<li>函数内部可以设定返回值</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>() &#123;</span><br><span class="line">  <span class="variable">@bgc:</span> yellowgreen;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="selector-class">.mixin</span>();</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">@bgc</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面<code>.mixin</code>函数必须要先调用一次，<code>.mixin</code>函数就会释放内部的变量；然后再使用返回的变量，这样做的好处就是随拿随用，不会造成全局浪费；<code>less</code>在编译的时候，会自动处理，看代码中有没有用到，也可以减少全局</li>
<li>污染；</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: yellowgreen;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>函数内部的变量也可以进行传参和计算</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@w</span>,<span class="variable">@h</span>) &#123;</span><br><span class="line">  <span class="variable">@padding:</span> ((<span class="variable">@w</span> + <span class="variable">@h</span>) * <span class="number">2</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="selector-class">.mixin</span>(<span class="number">10px</span>, <span class="number">20px</span>);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="variable">@padding</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">60px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>函数还可以进行嵌套</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outerMixin</span>(<span class="variable">@value</span>) &#123;</span><br><span class="line">  <span class="selector-class">.innerMixin</span>() &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="variable">@value</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.outerMixin</span>(gold);</span><br><span class="line">  <span class="selector-class">.innerMixin</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h2><ol>
<li><code>Less</code> 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力</li>
<li><code>CSS</code>预处理语言最大的魅力之一就是无限的嵌套</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们要设置三个<code>div</code>盒子是嵌套关系</li>
<li>传统<code>CSS</code>的写法</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box1</span> <span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>:purple;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box1</span> <span class="selector-class">.box2</span> <span class="selector-class">.box3</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>使用less</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: pink;</span><br><span class="line">  <span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>:purple;</span><br><span class="line">    <span class="selector-class">.box3</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">background-color</span>: green;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>这样写的最大的好处就是可以直观看出所有的选择器之间的关系，也可以清晰的给<code>HTML</code>结构进行归类</li>
<li>经典伪类清除浮动</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.less</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  <span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: gold;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="selector-tag">&amp;</span><span class="selector-pseudo">:after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">clear</span>:both;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">550px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">float</span>: left;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>&amp;</code>表示的是当前选择器的父级</li>
</ol>
<h2 id="运算"><a href="#运算" class="headerlink" title="运算"></a>运算</h2><ol>
<li>算术运算符 <code>+、-、*、/</code>可以对任何数字、颜色或变量进行运算。算术运算符在加、减或比较之前会进行单位换算</li>
<li>先看变量计算</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span> <span class="number">10cm</span>;</span><br><span class="line"><span class="variable">@height:</span> <span class="variable">@width</span> + <span class="number">2cm</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10cm</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">12cm</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>加减法，可以进行单位的转换</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span> <span class="number">10cm</span> - <span class="number">5px</span>;</span><br><span class="line"><span class="variable">@height:</span> <span class="variable">@width</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">9.86770833cm</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">9.86770833cm</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>颜色值也可以进行计算</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@color:</span> <span class="number">#224488</span> / <span class="number">2</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#112244</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>乘法和除法不作转换</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span> <span class="number">10cm</span> * <span class="number">5px</span>;</span><br><span class="line"><span class="variable">@color:</span>red;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50cm</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面编译之后的结果是<code>10cm * 5</code>的结果，不是<code>10cm * 5px</code>的结果，因为<code>乘除</code>是不进行<code>单位转换</code>的；</li>
</ol>
<h2 id="转义"><a href="#转义" class="headerlink" title="转义"></a>转义</h2><ol>
<li>转义的作用是什么？</li>
<li>我们先来看一个案例</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.less:</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@bgc:</span> <span class="string">&quot;purple&quot;</span>;</span><br><span class="line"><span class="selector-class">.box2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">@bgc</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>没有识别出来了，是因为我们的变量的结果给包裹了字符串，浏览器不认识带字符串的结果，此时我们可以转义这个变量</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@bgc:</span> <span class="string">~&quot;purple&quot;</span>;</span><br><span class="line"><span class="selector-class">.box2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">@bgc</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>因为使用了<code>~</code>进行了转义，转义之后的结果是不带字符串的</li>
</ol>
<h2 id="extend扩展"><a href="#extend扩展" class="headerlink" title="extend扩展"></a>extend扩展</h2><ol>
<li><code>Extend</code>是<code>Less</code>的伪类，它通过<code>:extend</code>选择器来获取另一个选择器的内容</li>
<li>基本使用</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.less:</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>&#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-tag">&amp;</span>:<span class="selector-tag">extend</span>(.style);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>&amp;</code>符号表示当前选择器的父选择器，<code>:extend</code>是<code>less</code>的伪类，上面<code>.box</code>代码表示扩展<code>.style</code>的内容</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>通过上面的代码你会发现，编译的结果是一个并集选择器，虽然作用看起来和混合是一样的，但是混合不同的是将同样的代码，复制一份给另一个选择器</li>
<li>扩展还可以写在选择器上</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>:<span class="selector-tag">extend</span>(.style)&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>编译之后的结果是一样的</li>
<li>还可以扩展多个选择器</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style1</span>&#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>:<span class="selector-tag">extend</span>(.style1,.style2)&#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style1</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style2</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以写在属性中</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="selector-tag">&amp;</span>:<span class="selector-tag">extend</span>(.style1,.style2);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>编译之后的结果是和写在选择器中是一样的；</li>
<li>需要注意的是多个参数是<code>不会</code>进行重复检测的</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style1</span>&#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: green;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style1</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: green;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码编译后的结果是，没有进行智能解析去重</li>
<li>扩展的选择器还可以进行嵌套</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="selector-class">.inner</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>:<span class="selector-tag">extend</span>(.style .inner)&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> <span class="selector-class">.inner</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>扩展也可以进行插值</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@selector:</span> .box;</span><br><span class="line"></span><br><span class="line"><span class="variable">@&#123;selector&#125;</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  <span class="selector-tag">&amp;</span>:<span class="selector-tag">extend</span>(.style .inner);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>编译之后的结果和上面是一样的</li>
<li>扩展还可以进行精确匹配</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">background</span>:orange;</span><br><span class="line">  <span class="selector-tag">&amp;</span><span class="selector-pseudo">:nth-child</span>(n+<span class="number">3</span>)&#123;</span><br><span class="line">    <span class="attribute">background-color</span>: purple;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>:<span class="selector-tag">extend</span>(.<span class="attribute">style</span>:<span class="built_in">nth-child</span>(n+<span class="number">3</span>))&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style</span><span class="selector-pseudo">:nth-child</span>(n+<span class="number">3</span>),</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: purple;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>扩展我们之前都是扩展属性，伪类是不可以进行扩展</li>
<li>看下面代码</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">  <span class="selector-tag">&amp;</span><span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-tag">&amp;</span>:<span class="selector-tag">extend</span>(.<span class="attribute">style2</span>:hover);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中的红色部分，表示扩展的是<code>.style2</code>的<code>:hover</code>的属性，而不是动作</li>
<li>如果我们像扩展动作，需要使用 <code>all</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style2</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">  <span class="selector-tag">&amp;</span><span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-tag">&amp;</span>:<span class="selector-tag">extend</span>(.style2 all);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style2</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style2</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="导入"><a href="#导入" class="headerlink" title="导入"></a>导入</h2><blockquote>
<p>┣ src</p>
<p>│┣ index.html</p>
<p>│┣ index.less</p>
<p>│┣ a.less</p>
<p>│┣ b.less</p>
<p>┣ webpack.config.js</p>
</blockquote>
<h3 id="基本使用-2"><a href="#基本使用-2" class="headerlink" title="基本使用"></a>基本使用</h3><ol>
<li>我们使用<code>@import</code>命令来进行导入</li>
<li>如果使用<code>@import</code>进行导入的时候，取决于不同的文件扩展名</li>
<li>先来看一下基本使用</li>
<li>index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box color&quot;</span>&gt;</span></span><br><span class="line">  你好</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>index.less:</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;b.css&quot;</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.style</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的引入一个是引入了<code>a.less</code>文件，一个是引入了<code>b.css</code>文件，如果要引入<code>less</code>文件，是可以进行省略拓展名的，否则必须要加拓展名</li>
<li><code>less</code>的导入和<code>css</code>的导入是有区别的，不是传统的<code>import</code>导入，而是<code>css</code>自己的导入</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.color</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码是编译之后的代码，你会发现，没有传统<code>css</code>的<code>import</code>,是因为<code>less</code>的<code>import</code>不是根据<code>css</code>的<code>import</code>扩展的</li>
</ol>
<h3 id="导入的选项"><a href="#导入的选项" class="headerlink" title="导入的选项"></a>导入的选项</h3><ol>
<li>@import (<code>**</code>)内部的 <code>**</code>就是导入的选项，指的是不同的规则配置，需要注意的是<code>@import</code>和后面的括号之间要加<code>空格</code>，否则不编译</li>
<li>a.less:</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>&#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@import(reference)</code> 用于导入外部文件，但是如果没有用到该文件内容的时候，<code>less</code>是不会进行编译的</li>
<li>index.less:</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (reference) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@import(inline)</code> 用于导入外部文件，如果没有用到该文件的内容， <code>less</code>也会进行导入，<code>inline</code>针对的是<code>css</code>文件，而不是<code>less</code>文件</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (inline) <span class="string">&quot;b.css&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.style</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果我们需要按照导入<code>less</code>文件进行导入，此时导入的选项是<code>@import(less)</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (less) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-class">.style</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面我们导入的是<code>less</code>文件，需要注意的是，<code>import</code>的导入即便导入的不是<code>less</code>文件，也会识别该文件的代码，按照<code>less</code>进行编译</li>
<li>比如我们导入的是<code>css</code>文件</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (less) <span class="string">&quot;b.css&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-class">.style</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时上面代码中导入的是一个扩展名为<code>.css</code>的文件，但是<code>import</code>识别了，并且能按照<code>css</code>风格进行编程</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果我们需要按照导入<code>css</code>文件进行导入，此时导入的选项是<code>@import(css)</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (css) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中导入是即便是<code>less</code>文件，也按照<code>css</code>的方式进行编译<br>2.<code>@import(once)</code>用于导入外部文件，确保文件只导入一次；</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (once) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> (once) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> (once) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> (once) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-class">.style</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面编译之后的代码，只编译了一次结果</li>
<li><code>@import(multiple)</code> 用于导入外部文件，确保文件可以导入多次</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (multiple) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> (multiple) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> (multiple) <span class="string">&quot;a.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-class">.style</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@import(optional)</code> 用于导入外部文件，确保文件导入失败不会报错；</li>
<li>比如我们导入一个不存在的文件</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span>  <span class="string">&quot;d.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-class">.style</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中<code>d.less</code>文件是不存在的，所以编译的时候会报错</li>
<li>可以使用<code>optional</code>来阻止编译失败报错</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> (optional)  <span class="string">&quot;d.less&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时不会报错了</li>
</ol>
<h2 id="Guard守卫"><a href="#Guard守卫" class="headerlink" title="Guard守卫"></a>Guard守卫</h2><ol>
<li><code>Guard</code>翻译过来就是守卫的意思，在<code>less</code>中的作用其实就是给<code>less</code>的属性添加判断条件</li>
<li>之前学习<code>less</code>的时候学过加减乘除，除了基本的计算还可以进行逻辑判断</li>
<li>使用<code>when关键字</code>来表示判断条件加载的逻辑，后面是判断条件依据</li>
<li>基本使用</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@width</span>,<span class="variable">@height</span>) <span class="keyword">when</span> (<span class="variable">@width</span> &gt;= <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="selector-class">.mixin</span>(<span class="number">100px</span>,<span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的条件是当<code>width</code>大于等于<code>100px</code>的时候，再进行赋值</li>
<li><code>Less</code>包含5个判断条件的运算符: <code>&gt;, &lt; ,&gt;= , &lt;=, =\</code></li>
<li>除了基本的逻辑判断，也可以进行类似于<code>JavaScript</code>的逻辑与或非</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@width</span>,<span class="variable">@height</span>) <span class="keyword">when</span> (<span class="variable">@width</span> = <span class="number">100</span>) <span class="keyword">and</span> (<span class="variable">@height</span> = <span class="variable">@width</span>) &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="selector-class">.mixin</span>(<span class="number">100px</span>,<span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>and</code>表示<code>并且</code>的意思，就是<code>逻辑与</code>，相当于<code>js</code>中<code>&amp;&amp;</code>判断，组合起来就是<code>when</code>和<code>and</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@width</span>,<span class="variable">@height</span>) <span class="keyword">when</span> (<span class="variable">@width</span> = <span class="number">100</span>) , (<span class="variable">@height</span> = <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="selector-class">.mixin</span>(<span class="number">120px</span>,<span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>使用<code>逗号</code>来表示<code>逻辑或</code>，相当于<code>js</code>中的<code>||</code>判断，组合起来就是<code>when</code>和 <code>,</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@width</span>,<span class="variable">@height</span>) <span class="keyword">when</span> <span class="keyword">not</span> (<span class="variable">@width</span> = <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="selector-class">.mixin</span>(<span class="number">120px</span>,<span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>使用<code>not</code>来表示<code>逻辑非</code>，相当于<code>js</code>中的<code>!</code>，组合起来就是<code>when</code>和<code>not</code></li>
<li>我们也可以使用<code>when</code>结合函数来实现循环</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 判断条件是当cont 大于0 的时候，函数就调用自己（递归）</span></span><br><span class="line"><span class="selector-class">.cont</span>(<span class="variable">@cont</span>) <span class="keyword">when</span>(<span class="variable">@cont</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">  <span class="comment">// 内部调用自己</span></span><br><span class="line">  <span class="selector-class">.cont</span>(<span class="variable">@cont</span> - <span class="number">1</span>);</span><br><span class="line">  <span class="attribute">width</span>: (<span class="number">5px</span> * <span class="variable">@cont</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="selector-class">.cont</span>(<span class="number">5</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">15px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">25px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的编译之后的代码是以<code>5px</code>为基数进行乘积，循环<code>5次</code>进行赋值</li>
<li>内部的判断条件还可以是内置函数</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@color</span>) <span class="keyword">when</span>(<span class="built_in">iscolor</span>(<span class="variable">@color</span>)) &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.mixin</span>(purple)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中的<code>iscolor</code>是<code>less</code>的内置函数，返回的是一个布尔值，如果布尔值为<code>true</code>了，则能赋值<code>mixin</code>内的属性</li>
</ol>
<h2 id="合并"><a href="#合并" class="headerlink" title="合并"></a>合并</h2><ol>
<li><code>less</code>提供了两种方式对<code>css</code>的属性进行合并，一种方式是用逗号隔开，一种方式是空格隔开，这两种方式也是遵循<code>css</code>的多个参数的语法规范</li>
<li>我们看一下之前的合并代码的情况</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>() &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line"><span class="selector-class">.mixin</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"></span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时看上面的代码，会发现<code>less</code>编译之后生成两个<code>padding</code>属性</li>
<li>我们希望这两个属性<code>合并</code>起来，成为一个属性</li>
<li>此时可以在需要合并的属性后面用<code>+</code>表示</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>() &#123;</span><br><span class="line">  <span class="selector-tag">padding</span>+: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.mixin</span>;</span><br><span class="line">  <span class="selector-tag">padding</span>+: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>, <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时上面的代码合并到一起了，但是中间使用的是<code>逗号隔开</code>的，不符合<code>css</code>的语法规定，我们希望使用的是空格</li>
<li>需要注意的是，如果要进行合并，此时这两个要合并的属性都需要加<code>+</code>，否则不生效</li>
<li>此时需要是用<code>+_</code>来表示</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>() &#123;</span><br><span class="line">  <span class="selector-tag">padding</span>+<span class="selector-tag">_</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.mixin</span>;</span><br><span class="line">  <span class="selector-tag">padding</span>+<span class="selector-tag">_</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="内置函数"><a href="#内置函数" class="headerlink" title="内置函数"></a>内置函数</h2><ol>
<li><code>less</code>提供了一些内置函数功能，辅助我们更合理的进行样式设置；</li>
</ol>
<h3 id="内置数学函数"><a href="#内置数学函数" class="headerlink" title="内置数学函数"></a>内置数学函数</h3><ol>
<li>基本使用</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span> <span class="built_in">ceil</span>(<span class="number">10.001</span>);</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>ceil</code>方法表示向上取整</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">11</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">11</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">函数以及描述</th>
<th style="text-align:center">实例</th>
<th style="text-align:center">结果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">ceil向上取整</td>
<td style="text-align:center">ceil(10.001)</td>
<td style="text-align:center">11</td>
</tr>
<tr>
<td style="text-align:center">floor向下取整</td>
<td style="text-align:center">floor(10.98)</td>
<td style="text-align:center">10</td>
</tr>
<tr>
<td style="text-align:center">percentage 小数点转百分比</td>
<td style="text-align:center">percentage(0.56)</td>
<td style="text-align:center">56%</td>
</tr>
<tr>
<td style="text-align:center">round 四舍五入取整</td>
<td style="text-align:center">round(5.50)</td>
<td style="text-align:center">6</td>
</tr>
<tr>
<td style="text-align:center">sqrt 平方根</td>
<td style="text-align:center">sqrt(25)</td>
<td style="text-align:center">5</td>
</tr>
<tr>
<td style="text-align:center">pow(x,y)返回x的y次幂</td>
<td style="text-align:center">pow(2,3);</td>
<td style="text-align:center">8</td>
</tr>
<tr>
<td style="text-align:center">abs绝对值</td>
<td style="text-align:center">abs(-18);</td>
<td style="text-align:center">18</td>
</tr>
<tr>
<td style="text-align:center">pi π</td>
<td style="text-align:center">pi()</td>
<td style="text-align:center">3.1415926**</td>
</tr>
<tr>
<td style="text-align:center">mod取余数，接收两个参数，返回第二个数值相比于第一个数值的余数</td>
<td style="text-align:center">mod(9,4)</td>
<td style="text-align:center">1</td>
</tr>
<tr>
<td style="text-align:center">min返回集合的最小值</td>
<td style="text-align:center">min(11,23,34,535,64)</td>
<td style="text-align:center">11</td>
</tr>
<tr>
<td style="text-align:center">max返回集合的最大值</td>
<td style="text-align:center">max(11,23,34,535,64)</td>
<td style="text-align:center">535</td>
</tr>
</tbody>
</table>
</div>
<h3 id="列表函数"><a href="#列表函数" class="headerlink" title="列表函数"></a>列表函数</h3><ol>
<li>设置变量的时候可有多个参数，使用<code>逗号</code>隔开；</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@list:</span> <span class="number">10px</span>,<span class="number">20px</span>,<span class="number">30px</span>,<span class="number">40px</span>,<span class="number">50px</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@list</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>, <span class="number">20px</span>, <span class="number">30px</span>, <span class="number">40px</span>, <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们就说上面的<code>@list</code>就表示的是列表</li>
<li>我们可以获取列表的长度<code>length</code></li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@list:</span> <span class="number">10px</span>,<span class="number">20px</span>,<span class="number">30px</span>,<span class="number">40px</span>,<span class="number">50px</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">length</span>(<span class="variable">@list</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时如果我们需要获取列表中某一项的值</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@list:</span> <span class="number">10px</span>,<span class="number">20px</span>,<span class="number">30px</span>,<span class="number">40px</span>,<span class="number">50px</span>;</span><br><span class="line"><span class="comment">// 获取列表的参数值</span></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">extract</span>(<span class="variable">@list</span>,<span class="number">2</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是，<code>extract</code>第二个参数表示选择列表中的某一项，注意下标是从<code>1</code>开始的，不是从<code>0</code>开始</li>
</ol>
<h3 id="类型函数"><a href="#类型函数" class="headerlink" title="类型函数"></a>类型函数</h3><ol>
<li>前面我们讲了<code>iscolor</code>表示当前的判断的变量是否是颜色值，初次之外<code>less</code>还提供其他的类型函数</li>
<li>基本使用</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@color</span>) <span class="keyword">when</span>(<span class="built_in">iscolor</span>(<span class="variable">@color</span>)) &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="selector-class">.mixin</span>(purple)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>iscolor</code>方法用来判断<code>@color</code>变量的值是否是一个颜色值；</li>
</ol>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">函数名称及描述</th>
<th style="text-align:center">实例</th>
<th style="text-align:center">结果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">isnumber表示判断参数是否是数字类型</td>
<td style="text-align:center">isnumber(100px)isnumber(“100px”)</td>
<td style="text-align:center">truefalse</td>
</tr>
<tr>
<td style="text-align:center">isstring表示判断参数是否是字符串类型</td>
<td style="text-align:center">isstring(100px)isstring(“100px”)</td>
<td style="text-align:center">falsetrue</td>
</tr>
<tr>
<td style="text-align:center">iscolor表示判断参数是否是颜色值</td>
<td style="text-align:center">iscolor(red)iscolor(#aabbcc)iscolor(rgb(100,200,123))iscolor (100px)iscolor (“100px”)</td>
<td style="text-align:center">truetruetruefalsefalse</td>
</tr>
<tr>
<td style="text-align:center">iskeyword表示判断参数是否是关键字</td>
<td style="text-align:center">iskeyword(style)iskeyword(when)iskeyword(“100px”)</td>
<td style="text-align:center">truetruefalse</td>
</tr>
<tr>
<td style="text-align:center">isurl表示判断参数是否是url地址</td>
<td style="text-align:center">isurl(url(a.jpg))isurl(100px)</td>
<td style="text-align:center">truefalse</td>
</tr>
<tr>
<td style="text-align:center">ispixel表示判断参数是否是px为单位</td>
<td style="text-align:center">ispixel(100px)ispixel(100%)</td>
<td style="text-align:center">truefalse</td>
</tr>
<tr>
<td style="text-align:center">isem表示判断参数是否是em为单位</td>
<td style="text-align:center">isem(2em)isem(2px)</td>
<td style="text-align:center">truefalse</td>
</tr>
<tr>
<td style="text-align:center">ispercentage表示判断参数是否是%为单位</td>
<td style="text-align:center">isem(2%)isem(2px)</td>
<td style="text-align:center">truefalse</td>
</tr>
<tr>
<td style="text-align:center">isunit表示判断是否是按照指定单位进行复制</td>
<td style="text-align:center">isunit(100px,px)isunit(100em,px)isunit(100em,em)isunit(100px,em)</td>
<td style="text-align:center">truefalsetruefalse</td>
</tr>
</tbody>
</table>
</div>
<h3 id="其他函数"><a href="#其他函数" class="headerlink" title="其他函数"></a>其他函数</h3><ol>
<li><code>color</code>函数表示可以将字符串类型颜色值转换为<code>css</code>可以识别的颜色值</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@color:</span> <span class="string">&quot;red&quot;</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">color</span>(<span class="variable">@color</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>我们知道字符串类型的属性浏览器是不识别的，所以我们可以使用<code>color</code>方法来进行转换</li>
<li><code>image-size</code>获取图片的大小</li>
<li>我们引入一个<code>560px*300px</code>的图片当做背景图</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">background</span>: url(<span class="string">images/4.jpg</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="built_in">image-size</span>(<span class="string">&quot;images/4.jpg&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>除了可以获取图片的宽度和高度之外，还可以单独的获取背景图片的宽度或者高度</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>(<span class="variable">@width</span>,<span class="variable">@height</span>) &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">background</span>: url(<span class="string">images/4.jpg</span>) no-repeat;</span><br><span class="line">  <span class="selector-class">.style</span>(<span class="built_in">image-width</span>(<span class="string">&quot;images/4.jpg&quot;</span>),<span class="built_in">image-height</span>(<span class="string">&quot;images/4.jpg&quot;</span>))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>我们也可以获取和设置属性的单位</li>
<li>设置单位</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@unit:</span> px;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">unit</span>(<span class="number">100</span>,<span class="variable">@unit</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="built_in">unit</span>(<span class="number">100</span>,<span class="variable">@unit</span>);</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>获取单位</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="built_in">get-unit</span>(<span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="built_in">get-unit</span>(<span class="number">200</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: px;</span><br><span class="line">  <span class="attribute">padding</span>: ;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>单位还可以进行转换</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">convert</span>(<span class="number">10cm</span>,mm);</span><br><span class="line">  <span class="attribute">height</span>: <span class="built_in">convert</span>(<span class="number">10cm</span>,mm);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100mm</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100mm</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="CSS预处理器-Sass"><a href="#CSS预处理器-Sass" class="headerlink" title="CSS预处理器-Sass"></a>CSS预处理器-Sass</h1><h2 id="Sass的介绍和webpack的配置"><a href="#Sass的介绍和webpack的配置" class="headerlink" title="Sass的介绍和webpack的配置"></a>Sass的介绍和webpack的配置</h2><ol>
<li><code>Sass</code> 是一款强化 <code>CSS</code> 的辅助工具，它在 <code>CSS</code> 语法的基础上增加了<code>变量</code> (variables)、<code>嵌套</code> (nested rules)<code>、混合</code> (mixins)、<code>导入</code> (inline imports) 等高级功能，这些拓展令 <code>CSS</code> 更加强大与优雅。使用 <code>Sass</code> 以及 <code>Sass</code> 的样式库（如 <a target="_blank" rel="noopener" href="http://compass-style.org/">Compass</a>）有助于更好地组织管理样式文件，以及更高效地开发项目</li>
<li><code>webpack</code>中如何配置<code>sass</code>？</li>
<li>我们需要让<code>webpack</code>编译<code>sass</code>文件的内容，所以需要<code>sass-loader</code>和<code>node-sass</code></li>
<li><code>sass</code>地址: <a target="_blank" rel="noopener" href="https://www.sass.hk/docs/">https://www.sass.hk/docs/</a></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install sass-loader node-sass -D</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是<code>sass-loader</code>和<code>node-sass</code>的版本兼容问题，如果配置不好的，请参考案例的版本</li>
<li>webpack.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader的配置</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line"></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(sass|scss)$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// 识别css-laoder的js字符串为样式代码，添加到head标签</span></span><br><span class="line">          <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">          <span class="comment">// css-loader是将样式的代码翻译为js的模式，内部是样式的字符串</span></span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// sass-loader的作用是将sass文件变为css文件</span></span><br><span class="line">          <span class="string">&#x27;sass-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">      …</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>看一下<code>sass</code>和<code>scss</code>文件的基本使用</li>
<li>.scss文件</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$<span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">$<span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: $width;</span><br><span class="line">  <span class="attribute">height</span>: $height;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>.sass文件</li>
</ol>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$bgc: orange</span><br><span class="line">.box</span><br><span class="line">  <span class="attribute">background</span>: $bgc</span><br></pre></td></tr></table></figure>
<ol>
<li><code>.scss</code>和<code>.sass</code>文件不同在哪里</li>
<li>主要是语法书写上的不同，<code>.scss</code>后缀的文件：所有 <code>CSS3</code> 语法在 <code>SCSS</code> 中都是通用的，同时加入 <code>Sass</code> 的特色功能。此外，<code>SCSS</code> 也支持大多数 <code>CSS</code> <code>hacks</code> 写法以及浏览器前缀写法. <code>scss</code>文件更倾向于我们书写<code>css</code>文件，需要用括号包裹，每一个属性值后面要加分号，<code>.scss</code>文件的书写习惯更倾向于<code>less</code>，当然，两者是没有联系的</li>
<li><code>.sass</code>使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 <code>SCSS</code> 更容易阅读，书写也更快速。缩进格式也可以使用 <code>Sass</code> 的全部功能，只是与 <code>SCSS</code> 相比个别地方采取了不同的表达方式。这种格式以 <code>.sass</code> 作为拓展名后缀名的文件是严格按照嵌套规则书写的，属性和值的后面要有空格比如<code>width:10px</code>就是错误的，因为<code>width</code>和<code>10px</code>之间没有空格，正确的写法是<code>widht:  10px</code>，每个选择器设置属性不需要加括号，设置每条属性后可以不加分号</li>
<li>我们的案例主要以<code>.scss</code>文件去演示</li>
</ol>
<h2 id="变量-1"><a href="#变量-1" class="headerlink" title="变量"></a>变量</h2><ol>
<li><code>sass</code>设置变量是美元符号<code>$</code>，赋值和<code>css</code>的赋值相同</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$width</span>: <span class="number">100px</span>;</span><br><span class="line"><span class="variable">$height</span>: <span class="number">100px</span>;</span><br><span class="line"><span class="variable">$background</span>: purple;</span><br><span class="line"><span class="variable">$font-size</span>: <span class="number">15px</span>;</span><br><span class="line"><span class="variable">$color</span>: <span class="number">#aaccdd</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$height</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="variable">$background</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="variable">$font-size</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">$color</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是<code>$</code>命名的变量严格要按照规范，每一个变量的结尾要<code>加分号</code></li>
<li><code>sass</code>也有局部局部变量</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="variable">$width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: purple;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时<code>.box2</code>的<code>$width</code>变量是获取不到的，因为当前作用域下是没有<code>$width</code>变量的，因为上面的<code>$width:100px</code>的设置是在<code>.box</code>内部的，所以<code>.box2</code>是获取不到的，如果希望能够获取到其他选择器内部的变量，可以给该选择器内部的变量设置<code>!global</code></li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="variable">$width</span>: <span class="number">100px</span> !global;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: purple;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>!global</code>表示将该变量设置为全局变量，而不是给某一个作用域使用</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: purple; &#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: orange; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>Sass</code>的插值语法使用的是 <code>#&#123;&#125;</code>,同样可以设置在<code>变量</code>中，属性中，<code>url</code>地址中</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$selector</span>: <span class="string">&quot;.box&quot;</span>;</span><br><span class="line">#&#123;<span class="variable">$selector</span>&#125;&#123;</span><br><span class="line">  <span class="attribute">width</span>: #&#123;<span class="number">100px</span> + <span class="number">200px</span>&#125;;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><ol>
<li>数字，1, 2, 13, 10px</li>
<li>字符串，有引号字符串与无引号字符串，”foo”, ‘bar’, baz</li>
<li>颜色，blue, #04a3f9, rgba(255,0,0,0.5)</li>
<li>布尔型，true, false</li>
<li>空值，null</li>
<li>数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif</li>
<li>maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)</li>
</ol>
<h2 id="混合-1"><a href="#混合-1" class="headerlink" title="混合"></a>混合</h2><ol>
<li><code>sass</code>定义混合是一组搭配，<code>@mixin</code>和<code>@include</code>两个指令搭配使用，混合如果不调用，<code>sass</code>是不编译的</li>
<li>看一下基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> style&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@include</span> style;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@mixin</code>和<code>@include</code>是<code>sass</code>的两个指令，<code>@mixin</code>表示定义一个混合指令，后面的内容就是混合的集合属性；</li>
<li><code>@include</code>表示调用混合的指令，后面的调用是定义混合的集合</li>
<li>混合也可以传入参数</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> style(<span class="variable">$width</span>,<span class="variable">$height</span>)&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$height</span>;</span><br><span class="line">  <span class="attribute">background</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@include</span> style(<span class="number">100px</span>,<span class="number">200px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以设置默认值</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> style(<span class="variable">$width</span>,<span class="variable">$height</span>:<span class="number">200px</span>)&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$height</span>;</span><br><span class="line">  <span class="attribute">background</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@include</span> style(<span class="number">100px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以乱序传参</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> style(<span class="variable">$width</span>,<span class="variable">$height</span>)&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$height</span>;</span><br><span class="line">  <span class="attribute">background</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@include</span> style(<span class="variable">$height</span>:<span class="number">100px</span>,<span class="variable">$width</span>:<span class="number">200px</span>);</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中，定义的参数是先<code>width</code>后<code>height</code>，但是调用的时候是先<code>height</code>后<code>width</code></li>
<li>可以用<code>@content</code>来设置自定义的参数</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> style&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="keyword">@content</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@include</span> style&#123;</span><br><span class="line">    <span class="attribute">background</span>: purple;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@content</code>指令表示在混合的集合内部自定义入参，调用的时候可以根据自己的需要传入参数，上面代码中<code>文字部分</code>表示定义自定义参数，表示自定义的内容，语法是固定的，用括号包裹起来</li>
<li>混合的传参可以模仿<code>es6</code> <code>rest</code>写法</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> box-shadow(<span class="variable">$shadows</span>...) &#123;</span><br><span class="line">  -moz-<span class="attribute">box-shadow</span>: <span class="variable">$shadows</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: <span class="variable">$shadows</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="variable">$shadows</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.shadows</span> &#123;</span><br><span class="line">  <span class="keyword">@include</span> box-shadow(<span class="number">0px</span> <span class="number">4px</span> <span class="number">5px</span> <span class="number">#666</span>, <span class="number">2px</span> <span class="number">6px</span> <span class="number">10px</span> <span class="number">#999</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.shadows</span> &#123;</span><br><span class="line">  -moz-<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">4px</span> <span class="number">5px</span> <span class="number">#666</span>, <span class="number">2px</span> <span class="number">6px</span> <span class="number">10px</span> <span class="number">#999</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">4px</span> <span class="number">5px</span> <span class="number">#666</span>, <span class="number">2px</span> <span class="number">6px</span> <span class="number">10px</span> <span class="number">#999</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">4px</span> <span class="number">5px</span> <span class="number">#666</span>, <span class="number">2px</span> <span class="number">6px</span> <span class="number">10px</span> <span class="number">#999</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>.sass</code>文件定义混合是有自己的语法糖的，注意不适用于<code>.scss</code>文件</li>
<li>使用<code>=</code>表示<code>@mixin</code>指令，用<code>+</code>表示<code>@include</code>指令</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">=style</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100px</span></span><br><span class="line">        height: <span class="number">100px</span></span><br><span class="line">        @content</span><br><span class="line">.box</span><br><span class="line">  +style</span><br><span class="line">        background: orange</span><br><span class="line">        font-size: <span class="number">18px</span></span><br></pre></td></tr></table></figure>
<h2 id="CSS的功能拓展"><a href="#CSS的功能拓展" class="headerlink" title="CSS的功能拓展"></a>CSS的功能拓展</h2><ol>
<li><code>Sass</code> 允许将一套 <code>CSS</code> 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#main</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#00ff00</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">97%</span>;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.redbox</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000000</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#main</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#00ff00</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">97%</span>; &#125;</span><br><span class="line">  <span class="selector-id">#main</span> <span class="selector-tag">p</span> <span class="selector-class">.redbox</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000000</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>使用<code>&amp;</code>符号表示父选择器</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: purple;</span><br><span class="line">  &amp;<span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: orange;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>除了样式可以嵌套之外，<code>CSS</code>复合属性也可以进行嵌套</li>
<li>什么是<code>CSS</code>复合属性？比如font-size，font-family，font-weight，font-style。都属于font系列，这种属性叫做font的复合属性</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">font</span>:&#123;</span><br><span class="line">    size: <span class="number">20px</span>;</span><br><span class="line">    family: <span class="string">&quot;宋体&quot;</span>;</span><br><span class="line">    weight: <span class="number">600</span>;</span><br><span class="line">    style: italic;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>集合内部如果是<code>CSS</code>的属性并且后面有冒号表示设置这个属性的复合属性</li>
<li><code>sass</code>有自己的占位符选择器<code>%</code></li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">%mixin&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@extend</span> %mixin;</span><br><span class="line">  <span class="attribute">background</span>: purple;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>占位符选择器是<code>sass</code>独有的， 所以<code>sass</code>在编译之后的<code>css</code>文件中是没有 <code>%</code>选择器的</li>
<li>在没有使用占位符选择器之前，<code>sass</code>编译是会忽略的，不会编译到<code>css</code>文件中</li>
</ol>
<h2 id="extend扩展-1"><a href="#extend扩展-1" class="headerlink" title="extend扩展"></a>extend扩展</h2><ol>
<li><code>sass</code>的扩展和<code>less</code>的扩展是有一些不同的</li>
<li>基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="keyword">@extend</span> .style;</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>sass</code>的<code>extend</code>是指令而不是伪类，所以<code>sass</code>的扩展是不能写在选择器上的</li>
<li><code>sass</code>的扩展除了可以处理属性，伪类也会扩展进去</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">  &amp;<span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: blue;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="keyword">@extend</span> .style;</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>, <span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>; &#125;</span><br><span class="line">  <span class="selector-class">.style</span><span class="selector-pseudo">:hover</span>, <span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: blue; &#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: orange; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>.box</code>和<code>.style</code>都添加了<code>:hover</code>伪类</li>
<li><code>extend</code>还可以合并选择器</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span> <span class="selector-class">.inner</span> <span class="selector-class">.content</span> <span class="selector-tag">a</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> <span class="selector-class">.box2</span> <span class="selector-class">.box3</span> &#123;</span><br><span class="line">  <span class="keyword">@extend</span> .outer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span> <span class="selector-class">.inner</span> <span class="selector-class">.content</span> <span class="selector-tag">a</span>, <span class="selector-class">.box</span> <span class="selector-class">.box2</span> <span class="selector-class">.box3</span> <span class="selector-class">.inner</span> <span class="selector-class">.content</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>!optional</code>关键字可以让没有或者引入错误的<code>extend</code>不抛出异常</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="keyword">@extend</span> .style;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>.style</code>是没有定义，此时进行编译会报错</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="keyword">@extend</span> .style !optional;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时不会报错，正常通过编译</li>
<li>还可以设置<code>extend-only</code>表示专为扩展服务的功能</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#context</span> <span class="selector-tag">a</span>%extreme &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">2em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@extend</span> %extreme</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#context</span> <span class="selector-tag">a</span><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">2em</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面编译之后代码中<code>.box</code>表示调用者的选择器，因为上面定义时候使用的是占位符选择器</li>
</ol>
<h2 id="sass小指令"><a href="#sass小指令" class="headerlink" title="sass小指令"></a>sass小指令</h2><h3 id="at-root"><a href="#at-root" class="headerlink" title="@at-root"></a>@at-root</h3><ol>
<li><code>at-root</code>指令的作用是将编译之后的选择从父选择器中抽离出来</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="selector-class">.inner</span>&#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="keyword">@at-root</span> .content&#123;</span><br><span class="line">      <span class="attribute">background</span>: orange;</span><br><span class="line">      <span class="selector-class">.root</span>&#123;</span><br><span class="line">        <span class="attribute">font-size</span>:<span class="number">12px</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>; &#125;</span><br><span class="line">  <span class="selector-class">.outer</span> <span class="selector-class">.inner</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>; &#125;</span><br><span class="line">    <span class="selector-class">.content</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: orange; &#125;</span><br><span class="line">      <span class="selector-class">.content</span> <span class="selector-class">.root</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">12px</span>; &#125;</span><br></pre></td></tr></table></figure>
<h3 id="debug"><a href="#debug" class="headerlink" title="@debug"></a>@debug</h3><ol>
<li><code>@debug</code>指令是一个调试指令，显示都在编译结果中</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="keyword">@debug</span> <span class="string">&quot;debug name is width:100px&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="warn"><a href="#warn" class="headerlink" title="@warn"></a>@warn</h3><ol>
<li><code>@warn</code>指令的作用是抛出警告</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="keyword">@warn</span> <span class="string">&quot;warn name is width:100px&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="error"><a href="#error" class="headerlink" title="@error"></a>@error</h3><p>1.<code>@error</code>是错误提示，一般是判断条件为<code>false</code>时候抛出的</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="keyword">@error</span> <span class="string">&quot;error name is width:100px&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Sass的运算"><a href="#Sass的运算" class="headerlink" title="Sass的运算"></a>Sass的运算</h2><h3 id="数学运算"><a href="#数学运算" class="headerlink" title="数学运算"></a>数学运算</h3><ol>
<li><code>Sass</code>支持数字的<code>加减乘除、取余</code>等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值</li>
<li>单位转换也仅仅支持加减</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$width</span>: <span class="number">100px</span> + <span class="number">2cm</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$width</span> - <span class="number">2cm</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">175.59055px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>乘除通过单位和倍数进行计算的</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$width</span>: <span class="number">100px</span> * <span class="number">2</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>结果是200px</li>
<li>不能写成100px * 2px;会报错</li>
<li>除是可以进行带单位的</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$width</span>: <span class="number">100px</span> / <span class="number">2px</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$width</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的结果是没有单位的，也就是说返回的是倍数，不是带单位的结果</li>
<li>如果需要结果带单位，被除数是不可以带单位</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$width</span>: <span class="number">100px</span> / <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$width</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>除号在<code>sass</code>中具有分割单位的作用，此时如果想要让除号进行计算，必须符合规则</li>
<li>如果值，或值的一部分，是变量或者函数的返回值</li>
<li>如果值被圆括号包裹</li>
<li>如果值是算数表达式的一部分</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font</span>: <span class="number">10px</span>/<span class="number">8px</span>;</span><br><span class="line">  <span class="variable">$width</span>: <span class="number">1000px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>/<span class="number">2</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">round</span>(<span class="number">1.5</span>)/<span class="number">2</span>;</span><br><span class="line">  <span class="attribute">height</span>: (<span class="number">500px</span>/<span class="number">2</span>);</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">5px</span> + <span class="number">8px</span>/<span class="number">2px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font</span>: <span class="number">10px</span>/<span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">250px</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">9px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>取余会有单位</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$width</span>: <span class="number">100px</span> % <span class="number">2px</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">$width</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>颜色值也可以进行运算</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#010203</span> + <span class="number">#040506</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#050709</span>; &#125;</span><br></pre></td></tr></table></figure>
<h3 id="关系运算"><a href="#关系运算" class="headerlink" title="关系运算"></a>关系运算</h3><ol>
<li>关系运算 <code>&lt;, &gt;, &lt;=, &gt;=</code> 也可用于数字运算，相等运算 <code>==</code>, <code>!=</code> 可用于所有数据类型。</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="number">100</span> &gt; <span class="number">2</span>,<span class="number">100px</span>, <span class="number">50px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="number">100</span> &lt; <span class="number">2</span>,<span class="number">100px</span>, <span class="number">50px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="number">100</span> &gt;= <span class="number">2</span>,<span class="number">100px</span>, <span class="number">50px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="number">100</span> &lt;= <span class="number">2</span>,<span class="number">100px</span>, <span class="number">50px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="number">100</span> == <span class="number">2</span>,<span class="number">100px</span>, <span class="number">50px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="number">100</span> != <span class="number">2</span>,<span class="number">100px</span>, <span class="number">50px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="流程控制"><a href="#流程控制" class="headerlink" title="流程控制"></a>流程控制</h2><h3 id="if（）函数"><a href="#if（）函数" class="headerlink" title="if（）函数"></a>if（）函数</h3><ol>
<li>语法：</li>
<li>if(表达式,结果为true的值，结果为false的值)</li>
<li><code>if()</code>是<code>sass</code>的内置函数</li>
<li>基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$num</span> :<span class="number">30px</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">if</span>(<span class="variable">$num</span> &gt; <span class="number">50px</span>, <span class="number">200px</span>, <span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>if</code>函数内部一共接收<code>三个参数</code> $num &gt; 50px指的是表达式的结果,如果结果为true了，则赋值第一个参数200px，否则赋值第二个参数<code>100px</code></li>
</ol>
<h3 id="if指令"><a href="#if指令" class="headerlink" title="@if指令"></a>@if指令</h3><ol>
<li>语法：</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@if</span> 表达式 &#123;</span><br><span class="line">	表达式结果为true的CSS的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="keyword">@if</span> <span class="number">1</span> + <span class="number">1</span> == <span class="number">2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">@if</span> <span class="number">2</span> - <span class="number">1</span> == <span class="number">1</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">@if</span> <span class="number">2</span> * <span class="number">1</span> == <span class="number">2</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: purple;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@if</code>指令后面的 <code>1+1</code>会返回布尔值，布尔值如果为<code>true</code>了，此时内部的<code>css</code>代码就会生效</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: purple; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>和<code>JavaScript</code>一样也有<code>else-if</code>和<code>else</code></li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="keyword">@if</span> <span class="number">2</span> &gt; <span class="number">3</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125; <span class="keyword">@else</span> if <span class="number">2</span> &gt;= <span class="number">2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  &#125; <span class="keyword">@else</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>; &#125;</span><br></pre></td></tr></table></figure>
<h3 id="for指令"><a href="#for指令" class="headerlink" title="@for指令"></a>@for指令</h3><ol>
<li>循环是通过<code>@for</code>指令和<code>from</code>关键字配合的</li>
<li>一共提供了两种表达方式</li>
<li>第一种表达方式</li>
<li>语法:</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@for</span> $变量 from 开始值 through 结束值</span><br></pre></td></tr></table></figure>
<h3 id="基本使用-3"><a href="#基本使用-3" class="headerlink" title="基本使用"></a>基本使用</h3><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@for</span> <span class="variable">$i</span> from <span class="number">1</span> through <span class="number">5</span> &#123;</span><br><span class="line">  <span class="selector-class">.box</span>#&#123;<span class="variable">$i</span>&#125; &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="variable">$i</span> * <span class="number">10px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>@for <script type="math/tex">`i from  1 through 5表达的含义是:设置循环遍历​`</script>i，从1到5（包含5），$i就是循环每次的值</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box3</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">30px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box4</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">40px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box5</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>第二种表达方式</li>
<li>语法：</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@for</span> $变量 from 开始值 to结束值</span><br></pre></td></tr></table></figure>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@for</span> <span class="variable">$i</span> from <span class="number">1</span> to <span class="number">5</span> &#123;</span><br><span class="line">  <span class="selector-class">.box</span>#&#123;<span class="variable">$i</span>&#125; &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="variable">$i</span> * <span class="number">10px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>@for <script type="math/tex">`i from  1 to 5表达的含义是:设置循环遍历​`</script>i，从1到5（不包含5），<code>$i</code>就是循环每次的值</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box3</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">30px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box4</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">40px</span>; &#125;</span><br></pre></td></tr></table></figure>
<h3 id="each指令"><a href="#each指令" class="headerlink" title="@each指令"></a>@each指令</h3><ol>
<li><code>@each</code>指令主要针对的不是单个数值，而是数组或者<code>map</code>映射</li>
<li>语法:</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@each</span> $变量 数组或者map映射</span><br></pre></td></tr></table></figure>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@each</span> <span class="variable">$color</span> in red,</span><br><span class="line">orange,</span><br><span class="line">yellow,</span><br><span class="line">green,</span><br><span class="line">cyan,</span><br><span class="line">blue,</span><br><span class="line">purple &#123;</span><br><span class="line">  <span class="selector-class">.color_</span>#&#123;<span class="variable">$color</span>&#125; &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: #&#123;<span class="variable">$color</span>&#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.color_red</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: red; &#125;</span><br><span class="line"><span class="selector-class">.color_orange</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: orange; &#125;</span><br><span class="line"><span class="selector-class">.color_yellow</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: yellow; &#125;</span><br><span class="line"><span class="selector-class">.color_green</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: green; &#125;</span><br><span class="line"><span class="selector-class">.color_cyan</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: cyan; &#125;</span><br><span class="line"><span class="selector-class">.color_blue</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: blue; &#125;</span><br><span class="line"><span class="selector-class">.color_purple</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: purple; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>@each</code>也可以进行多个分配，比如给多个选择器设置多个属性</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@each</span> <span class="variable">$width</span>,<span class="variable">$height</span> in (<span class="number">100px</span>,<span class="number">200px</span>) , (<span class="number">200px</span>, <span class="number">300px</span>) ,(<span class="number">300px</span>,<span class="number">400px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.box</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="variable">$width</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="variable">$height</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>; &#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">400px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以进行指定的映射分配</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@each</span> <span class="variable">$header</span>,<span class="variable">$color</span> in (<span class="string">&quot;.box&quot;</span>: red, h2: green, <span class="attribute">div</span>: blue) &#123;</span><br><span class="line">  #&#123;<span class="variable">$header</span>&#125; &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="variable">$color</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red; &#125;</span><br><span class="line"><span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: green; &#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue; &#125;</span><br></pre></td></tr></table></figure>
<h3 id="while指令"><a href="#while指令" class="headerlink" title="@while指令"></a>@while指令</h3><ol>
<li>语法：</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@while</span> 判断条件 &#123;</span><br><span class="line">	符合条件的CSS代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$i</span>: <span class="number">50</span>;</span><br><span class="line"><span class="keyword">@while</span> <span class="variable">$i</span> &gt; <span class="number">0</span> &#123;</span><br><span class="line">  <span class="comment">// 设置属性</span></span><br><span class="line">  <span class="selector-class">.padding-</span>#&#123;<span class="variable">$i</span>&#125; &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">1px</span> * <span class="variable">$i</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 再次给变量赋值，步长为10</span></span><br><span class="line">  <span class="variable">$i</span>: <span class="variable">$i</span> - <span class="number">10</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.padding-50</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">50px</span>; &#125;</span><br><span class="line"><span class="selector-class">.padding-40</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">40px</span>; &#125;</span><br><span class="line"><span class="selector-class">.padding-30</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">30px</span>; &#125;</span><br><span class="line"><span class="selector-class">.padding-20</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">20px</span>; &#125;</span><br><span class="line"><span class="selector-class">.padding-10</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>; &#125;</span><br></pre></td></tr></table></figure>
<h2 id="导入-1"><a href="#导入-1" class="headerlink" title="导入"></a>导入</h2><blockquote>
<p>┣ webpack.config.js</p>
<p>┣ src</p>
<p>│┣ index.html</p>
<p>│┣ index.js</p>
<p>│┣ index.scss</p>
<p>│┣ import.scss</p>
<p>│┣ import2.scss</p>
</blockquote>
<ol>
<li>基本导入</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;import.scss&quot;</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: orange; &#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的编译结果是两个同样的选择器，而不是合并代码</li>
<li>如果导入的是以<code>.scss</code>结尾或者<code>.sass</code>结尾的文件也可以省略拓展名</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;import&quot;</span>;</span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>screen</code>表示导入的是绝对路径</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;import&quot;</span> srceen;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="attribute">C</span>:\Users\QianchengPC\Desktop\webpack\... \import.scss srceen;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以导入绝对地址文件</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;http://foo.com/bar&quot;</span>;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果<code>@import</code>后面的参数是<code>url(...)</code>表示以<code>CSS</code>规则导入的</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> url(<span class="string">&quot;./import.scss&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以导入多个文件</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;import&quot;</span>,<span class="string">&quot;import2&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>导入也可以在<code>css</code>属性内部</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="keyword">@import</span> <span class="string">&quot;import&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>; &#125;</span><br><span class="line">  <span class="selector-class">.box</span> <span class="selector-class">.inner</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: orange; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果需要导入 <code>SCSS</code> 或者 <code>Sass</code> 文件，但又不希望将其编译为 <code>CSS</code>，只需要在文件名前添加<code>下划线</code>，这样会告诉 <code>Sass</code> 不要编译这些文件，但导入语句中却不需要添加下划线。</li>
<li>例如，将文件命名为 <code>_colors.scss</code>，便不会编译 <code>_colours.css</code>文件。</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;colors&quot;</span>;</span><br></pre></td></tr></table></figure>
<h2 id="内置函数-1"><a href="#内置函数-1" class="headerlink" title="内置函数"></a>内置函数</h2><h3 id="字符函数"><a href="#字符函数" class="headerlink" title="字符函数"></a>字符函数</h3><ol>
<li><code>quote</code>函数的作用是给参数，或者属性添加引号</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  &amp;<span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">quote</span>(sass<span class="string">&quot;*&amp;%#&quot;</span>study)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>主要作用是一些特殊符号当做参数的时候如果<code>不加引号</code>，会识别失败</li>
<li><code>unquote</code>函数的作用是给参数，或者属性<code>删除引号</code></li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line">  &amp;<span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">unquote</span>(<span class="string">&quot;sass study&quot;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>; &#125;</span><br><span class="line">  <span class="selector-class">.box</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: sass study; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>unquote</code>函数的主要功能是去掉一些包裹着字符串参数，因为有的属性带着字符串是不识别的</li>
<li><code>str-length</code>函数的作用是识别字符串的<code>length</code>长度</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line"></span><br><span class="line">  &amp;<span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">str-length</span>(<span class="string">&#x27;nihao&#x27;</span>) //<span class="number">9</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>to-upper-case</code>函数的作用是将字符串转为大写</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line"></span><br><span class="line">  &amp;<span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">to-upper-case</span>(<span class="string">&quot;nihao&quot;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>; &#125;</span><br><span class="line">  <span class="selector-class">.box</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;nihao&quot;</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>to-lower-case</code>函数的作用是将字符串转为小写</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">   <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">   <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">   <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>;</span><br><span class="line"></span><br><span class="line">   &amp;<span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">     <span class="attribute">content</span>: <span class="built_in">to-lower-case</span>(<span class="string">&quot;nihao&quot;</span>)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#333</span>; &#125;</span><br><span class="line">  <span class="selector-class">.box</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;nihao&quot;</span>; &#125;</span><br></pre></td></tr></table></figure>
<h3 id="数学函数"><a href="#数学函数" class="headerlink" title="数学函数"></a>数学函数</h3><ol>
<li>基本使用</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">     <span class="attribute">width</span>: <span class="built_in">percentage</span>(<span class="number">1</span>)</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>0</code>到<code>100%</code>直接的数值用<code>0-1</code>的小数表示</li>
</ol>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">函数名称及描述</th>
<th style="text-align:center">示例</th>
<th style="text-align:center">执行结果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">round四舍五入取整</td>
<td style="text-align:center">round(4.45)round(4.5)</td>
<td style="text-align:center">45</td>
</tr>
<tr>
<td style="text-align:center">ceil向上取整</td>
<td style="text-align:center">ceil(2.1)</td>
<td style="text-align:center">3</td>
</tr>
<tr>
<td style="text-align:center">floor向下取整</td>
<td style="text-align:center">floor(2.99)</td>
<td style="text-align:center">2</td>
</tr>
<tr>
<td style="text-align:center">abs取绝对值</td>
<td style="text-align:center">abs(1)abs(-1)</td>
<td style="text-align:center">11</td>
</tr>
<tr>
<td style="text-align:center">min取最小值</td>
<td style="text-align:center">min(100,200,300,10,2)</td>
<td style="text-align:center">2</td>
</tr>
<tr>
<td style="text-align:center">max取最大值</td>
<td style="text-align:center">min(100,200,300,10,2)</td>
<td style="text-align:center">300</td>
</tr>
<tr>
<td style="text-align:center">random取0-1的随机数如果有参数表示0到这个参数的范围</td>
<td style="text-align:center">random()</td>
<td style="text-align:center">0.9876</td>
</tr>
</tbody>
</table>
</div>
<h3 id="列表函数-1"><a href="#列表函数-1" class="headerlink" title="列表函数"></a>列表函数</h3><ol>
<li><code>length</code>函数 返回的是列表的长度</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$list</span>: red,orange,yellow,green,cyan,blue,purple;</span><br><span class="line"></span><br><span class="line">   <span class="selector-class">.box</span>&#123;</span><br><span class="line">     <span class="attribute">width</span>: <span class="built_in">length</span>(<span class="variable">$list</span>); <span class="comment">// 7</span></span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>nth</code>函数的作用是获取列表中的某一项</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$list</span>: red,</span><br><span class="line">orange,</span><br><span class="line">yellow,</span><br><span class="line">green,</span><br><span class="line">cyan,</span><br><span class="line">blue,</span><br><span class="line">purple;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">nth</span>(<span class="variable">$list</span>,  <span class="number">2</span>) // orange</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>nth</code>函数一共接收两个参数，第一个参数是列表，第二个参数获取列表的序号，从<code>1</code>开始</li>
<li><code>join</code>函数的作用是合并参数</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="built_in">join</span>((<span class="number">1px</span>,solid), orange,comma)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>comma（默认参数）</code>表示使用逗号隔开，如果希望用空格隔开的话，使用<code>space</code>，如果合并多个参数可以用<code>()包裹</code>起来</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span>, solid, orange; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>index</code>函数表示获该值在数组中的下标位置</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">  <span class="variable">$list</span>: red,</span><br><span class="line">    orange,</span><br><span class="line">    yellow,</span><br><span class="line">    green,</span><br><span class="line">    cyan,</span><br><span class="line">    blue,</span><br><span class="line">    purple;</span><br><span class="line">    <span class="selector-class">.box</span>&#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="built_in">index</span>(<span class="variable">$list</span>,green) //<span class="number">4</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>一共接收两个参数，第一个参数是判断的列表，第二个参数判断的参数值</li>
</ol>
<h3 id="其他函数-1"><a href="#其他函数-1" class="headerlink" title="其他函数"></a>其他函数</h3><p>1.<code>type-of</code>函数的作用是返回当前参数的数据类型</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$list</span>: <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>;</span><br><span class="line">    <span class="selector-class">.box</span>&#123;</span><br><span class="line">      &amp;<span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">type-of</span>(<span class="string">&quot;100px&quot;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">      &amp;<span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">type-of</span>(<span class="number">100px</span>)</span><br><span class="line">      &#125;</span><br><span class="line">      &amp;<span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">type-of</span>(true)</span><br><span class="line">      &#125;</span><br><span class="line">      &amp;<span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">type-of</span>(<span class="variable">$list</span>)</span><br><span class="line">      &#125;</span><br><span class="line">       &amp;<span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">         <span class="attribute">content</span>: <span class="built_in">type-of</span>(orange)</span><br><span class="line">       &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: string; &#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: number; &#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: bool; &#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: list; &#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: color; &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>unit</code>函数的作用是获取参数单位</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">      <span class="variable">$width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="built_in">unit</span>(<span class="variable">$width</span>) // px</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>unitless</code>函数的作用是判断当前的参数是否有单位，如果有返回<code>false</code>，否则返回<code>true</code></li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">      <span class="variable">$width</span>:<span class="number">100</span>;</span><br><span class="line">      &amp;<span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">unitless</span>(<span class="variable">$width</span>) // true</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h1 id="CSS预处理器-Stylus"><a href="#CSS预处理器-Stylus" class="headerlink" title="CSS预处理器-Stylus"></a>CSS预处理器-Stylus</h1><h2 id="安装和基本使用"><a href="#安装和基本使用" class="headerlink" title="安装和基本使用"></a>安装和基本使用</h2><ol>
<li>文档：<a target="_blank" rel="noopener" href="https://stylus.bootcss.com/">https://stylus.bootcss.com/</a></li>
<li><code>Stylus</code> 语法是基于缩进的。空格很重要，所以我们使用<code>_</code>缩进<code>_</code>和<code>_</code>突出<code>_</code>来代替<code>&#123;</code> 和 <code>&#125;</code></li>
<li><code>weback</code>如何配置<code>stylus</code></li>
<li>安装依赖</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install stylus stylus-loader -D</span><br></pre></td></tr></table></figure>
<ol>
<li>安装之后要注意版本问题，否则会报错</li>
<li>webpack.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;./src/index.js&quot;</span>,</span><br><span class="line">  <span class="comment">// 出口</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">  …</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// loader的配置</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line"></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.stylus$/</span>,</span><br><span class="line">        <span class="attr">use</span>: [</span><br><span class="line">          <span class="comment">// 识别css-laoder的js字符串为样式代码，添加到head标签</span></span><br><span class="line">          <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">          <span class="comment">// css-loader是将样式的代码翻译为js的模式，内部是样式的字符串</span></span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// sass-loader的作用是将stylus文件变为css文件</span></span><br><span class="line">          <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">      …</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>stylus</code>提供了两种文件的拓展名<code>.styl</code>和<code>.stylus</code></li>
<li>此时就可以新建<code>stylus</code>文件了</li>
<li>index.stylus:</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line"></span><br><span class="line">.box2&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: purple</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>通过上面的写法，你会发现，<code>stylus</code>很聪明，你会写<code>less</code>就会写<code>stylus</code>，你会写<code>sass</code>就会写<code>stylus</code>，你会写<code>css</code>，就会写<code>stylus</code></li>
<li>基于缩进写法（上面代码中红色部分）是现在比较流行的写法，不需要加括号，不需要加分号，甚至属性和值之间都不需要加冒号，<code>stylus</code>最大的好处是，都兼容，基本写了也没错</li>
</ol>
<h2 id="变量-2"><a href="#变量-2" class="headerlink" title="变量"></a>变量</h2><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>=<span class="number">100px</span></span><br><span class="line"><span class="attribute">height</span>=<span class="number">200px</span></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> width</span><br><span class="line">  <span class="attribute">height</span> height</span><br></pre></td></tr></table></figure>
<ol>
<li><code>stylus</code>定义变量没有任何的前缀，后面使用等号赋值，不是冒号</li>
<li>也可以设置作用域</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>=<span class="number">100px</span></span><br><span class="line"><span class="attribute">height</span>=<span class="number">200px</span></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> = <span class="number">200px</span></span><br><span class="line">  <span class="attribute">width</span> width // <span class="number">200px</span></span><br><span class="line">  <span class="attribute">height</span> height</span><br></pre></td></tr></table></figure>
<ol>
<li>如果获取不到变量，不会抛出错误，而会直接编译这个变量为参数</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">height</span>=<span class="number">200px</span></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> = <span class="number">200px</span></span><br><span class="line">  <span class="attribute">width</span> width</span><br><span class="line">  <span class="attribute">height</span> height</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span></span><br><span class="line">  <span class="attribute">width</span> width</span><br></pre></td></tr></table></figure>
<ol>
<li>上面 <code>.box2</code>中获取<code>width</code>是没有作用域的，所以获取不到</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: width;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>定义数组序列可以使用<code>…</code></li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span> ... <span class="number">10</span></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> (list[<span class="number">3</span>])px // <span class="number">4px</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>stylus</code>的插值语法使用的是<code>&#123;&#125;</code></li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">selector = <span class="string">&quot;.box3&quot;</span></span><br><span class="line">&#123;selector&#125; &#123;</span><br><span class="line">  <span class="attribute">width</span>: width;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>插值和其他的预处理语言一样，都可以在属性、选择器，参数中任意插值</li>
<li>父选器也是使用<code>&amp;</code>符号来表示</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">border</span> <span class="number">1px</span> solid red</span><br><span class="line">  <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">    <span class="attribute">color</span> orange</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#f00</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ffa500</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>不需要分配值给变量，就可以定义属性</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span></span><br><span class="line">  <span class="attribute">width</span> w = <span class="number">200px</span> // <span class="number">200px</span></span><br><span class="line">  <span class="attribute">height</span> h = <span class="number">300px</span> // <span class="number">300px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="selector-class">.inner</span></span><br><span class="line">    <span class="attribute">width</span> w // <span class="number">200px</span></span><br><span class="line">    <span class="attribute">height</span> h // <span class="number">300px</span></span><br><span class="line">    <span class="attribute">background</span> purple</span><br></pre></td></tr></table></figure>
<ol>
<li><code>.inner</code>的<code>width</code>和<code>height</code>都是从<code>.ourter</code>中获取的</li>
<li>还可以验证祖先选择器获取属性</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="selector-class">.center</span></span><br><span class="line">    <span class="attribute">width</span> <span class="number">200px</span></span><br><span class="line">    <span class="selector-class">.inner</span></span><br><span class="line">      <span class="attribute">width</span> <span class="number">300px</span></span><br><span class="line">      <span class="selector-class">.content</span></span><br><span class="line">        <span class="attribute">width</span> @width // <span class="number">300px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>最内部的<code>.content</code>的<code>width</code>值为<code>300px</code>，因为从父选择器中获取到了<code>width</code>，如果父选择器没有，则再向上查找，直到找到为止，如果都没有则为空</li>
<li><code>stylus</code>还可以设置携带属性</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">width</span><span class="params">()</span></span></span><br><span class="line">  <span class="attribute">width</span> arguments</span><br><span class="line">  <span class="attribute">height</span> <span class="number">200px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中<code>width()</code>函数表示设置<code>width</code>属性的携带参数，内部的<code>arguments</code>表示设置<code>width</code>的属性值</li>
<li>当选择器设置了<code>width</code>属性后，会自动携带<code>height</code>和<code>background</code>属性</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果携带属性和选择器内部属性冲突了，此时不会智能替换，而是同时都设置</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">width</span><span class="params">()</span></span></span><br><span class="line">  <span class="attribute">width</span> arguments</span><br><span class="line">  <span class="attribute">height</span> <span class="number">200px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">background</span> purple</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#800080</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果不希望覆盖，可以使用<code>unless</code></li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">width</span><span class="params">()</span></span></span><br><span class="line">  <span class="attribute">width</span> arguments</span><br><span class="line">  <span class="attribute">height</span> <span class="number">200px</span></span><br><span class="line">  <span class="attribute">background</span> orange unless @background</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">background</span>: green</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#008000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="嵌套-1"><a href="#嵌套-1" class="headerlink" title="嵌套"></a>嵌套</h2><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span> = <span class="number">100px</span></span><br><span class="line">  select = box</span><br><span class="line">  .&#123;select&#125;</span><br><span class="line">    <span class="attribute">width</span> width</span><br><span class="line">    <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">    <span class="attribute">border</span> <span class="number">1px</span> solid <span class="number">#000</span></span><br><span class="line">    <span class="selector-class">.inner</span></span><br><span class="line">      <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">      <span class="attribute">height</span> <span class="number">100px</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> <span class="selector-class">.inner</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="混合-2"><a href="#混合-2" class="headerlink" title="混合"></a>混合</h2><ol>
<li>基本使用</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">mixin</span><span class="params">()</span></span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="built_in">mixin</span>()</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>stylus</code>的混合也没有任何的标识符号，不需要加任何的前缀</li>
<li>也可以设置参数</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">mixin</span><span class="params">(width,height)</span></span></span><br><span class="line">  <span class="attribute">width</span> width</span><br><span class="line">  <span class="attribute">height</span> height</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="built_in">mixin</span>(<span class="number">100px</span>,<span class="number">200px</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以设置默认参数</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">mixin</span><span class="params">(width=<span class="number">300px</span>,height)</span></span></span><br><span class="line">  <span class="attribute">width</span> width</span><br><span class="line">  <span class="attribute">height</span> height</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="built_in">mixin</span>(,<span class="number">200px</span>)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="title">mixin</span><span class="params">(width,height)</span></span></span><br><span class="line">  <span class="attribute">width</span> width</span><br><span class="line">  <span class="attribute">height</span> height</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="built_in">mixin</span>(<span class="attribute">height</span>: <span class="number">300px</span>,width:<span class="number">200px</span>)</span><br></pre></td></tr></table></figure>
<h2 id="运算-1"><a href="#运算-1" class="headerlink" title="运算"></a>运算</h2><ol>
<li>常见的数据类型是：数字、字符串、布尔值、<code>list</code>数组、<code>map</code>映射，颜色值</li>
</ol>
<h3 id="普通计算"><a href="#普通计算" class="headerlink" title="普通计算"></a>普通计算</h3><ol>
<li>支持普通的<code>+,-,*,/,%</code>的数字运算，需要注意的是不支持单位的转换，无论是加减还是乘除，一律按照<code>左边</code>的单位为依据</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span> = <span class="number">100px</span> + <span class="number">200cm</span></span><br><span class="line"><span class="attribute">color</span> = <span class="number">#aab</span> - <span class="number">#cdd</span></span><br><span class="line"><span class="attribute">height</span> = width * <span class="number">1.5</span></span><br><span class="line"><span class="attribute">padding</span> = <span class="number">100</span>/<span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> width</span><br><span class="line">  <span class="attribute">height</span> height</span><br><span class="line">  <span class="attribute">color</span> color</span><br><span class="line">  <span class="attribute">padding</span> padding</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">450px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">50</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果是数组计算</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span></span><br><span class="line">list2 = <span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> list2[<span class="number">0</span>] - list[<span class="number">0</span>]</span><br></pre></td></tr></table></figure>
<ol>
<li>数组也可以通过下标来获取进行计算的</li>
<li>指数</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  <span class="attribute">width</span>: (<span class="number">2</span> ** <span class="number">3</span>)px // <span class="number">8px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>使用<code>**</code>来表示指数（幂运算）</li>
</ol>
<h3 id="运算-2"><a href="#运算-2" class="headerlink" title="运算"></a>运算</h3><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b)</span></span></span><br><span class="line">  <span class="keyword">if</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">b</span></span><br><span class="line">    <span class="attribute">background</span>: blue</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="built_in">add</span>(<span class="number">300</span>,<span class="number">200</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#00f</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>同样支持&gt;,&lt;,&gt;=,&lt;=,==,!=</li>
</ol>
<h3 id="关系运算符"><a href="#关系运算符" class="headerlink" title="关系运算符"></a>关系运算符</h3><ol>
<li>关系运算符主要是与和或</li>
<li>逻辑与</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b)</span></span></span><br><span class="line">  <span class="keyword">if</span> a== <span class="number">100</span> &amp;&amp; <span class="selector-tag">b</span> == <span class="number">200</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span></span><br><span class="line">    <span class="attribute">background</span>: orange</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="built_in">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>逻辑或</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b)</span></span></span><br><span class="line">  <span class="keyword">if</span> a== <span class="number">100</span> || <span class="selector-tag">b</span> == <span class="number">200</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span></span><br><span class="line">    <span class="attribute">background</span>: orange</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="built_in">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>逻辑与和逻辑或有各自的别名，分别是<code>and</code>和<code>or</code></li>
<li>例如，逻辑与</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b)</span></span></span><br><span class="line">  <span class="keyword">if</span> <span class="selector-tag">a</span> == <span class="number">100</span> and <span class="selector-tag">b</span> == <span class="number">200</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span></span><br><span class="line">    <span class="attribute">background</span>: orange</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="built_in">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以设置<code>三元运算符</code></li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a)</span></span></span><br><span class="line">    <span class="attribute">width</span> : (a &gt; <span class="number">100px</span>) ? a : <span class="number">50px</span></span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.box</span></span><br><span class="line">    <span class="built_in">add</span>(<span class="number">200px</span>) <span class="comment">// 200px</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>in</code>操作符用来判断当前的值是否在<code>list</code>集合中</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">    <span class="attribute">content</span>: <span class="number">2</span> in list // true</span><br></pre></td></tr></table></figure>
<ol>
<li><code>is</code>检查类型</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span></span><br><span class="line">    <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">      <span class="attribute">content</span>: <span class="number">2</span> is a <span class="string">&quot;rgba&quot;</span> // false</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中红色部分表示2是否是一个颜色值，结果是<code>false</code></li>
<li>我们也可以通过<code>type</code>模拟<code>is</code>类型检查</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span></span><br><span class="line">    <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">      <span class="attribute">content</span>: <span class="built_in">type</span>(<span class="number">2</span>) == <span class="string">&#x27;rgba&#x27;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>我们还可以通过<code>()</code>来强制设定单位</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">200</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> (list)px</span><br></pre></td></tr></table></figure>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><ol>
<li>函数和混合的语法很相似，只不过函数的是返回值，而混合是属性</li>
<li>基本使用</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b)</span></span></span><br><span class="line">  <span class="selector-tag">a</span> + <span class="selector-tag">b</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> <span class="built_in">add</span>(<span class="number">10px</span>,<span class="number">10</span>) // <span class="number">20px</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>a+b</code>就是<code>add</code>函数的返回值</li>
<li>也可以设置默认值</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b = a)</span></span></span><br><span class="line">  <span class="selector-tag">a</span> + <span class="selector-tag">b</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> <span class="built_in">add</span>(<span class="number">30px</span>) // <span class="number">60px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>函数也有<code>return</code>关键字</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b = a)</span></span></span><br><span class="line">  <span class="selector-tag">a</span> + <span class="selector-tag">b</span></span><br><span class="line">  return <span class="number">10px</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> <span class="built_in">add</span>(<span class="number">30px</span>) // <span class="number">10px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>因为有<code>return</code>关键字，所以函数的返回依据就按照<code>return</code>来参考,上面代码中的结果就是<code>10px</code>，而不是<code>a+b</code>的结果</li>
<li>如果没有<code>return</code>关键字，那么以函数的最后一行为返回值</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b = a)</span></span></span><br><span class="line">  <span class="selector-tag">a</span> + <span class="selector-tag">b</span></span><br><span class="line">  <span class="selector-tag">a</span> * <span class="selector-tag">b</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> <span class="built_in">add</span>(<span class="number">30px</span>) // <span class="number">900px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>因为<code>a * b</code>是函数<code>add</code>的最后一行，所以<code>a*b</code>就是<code>add</code>函数的返回值，而不是<code>a+b</code></li>
<li>函数也有自己的函数体</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">(a,b)</span></span></span><br><span class="line">  <span class="selector-tag">a</span> = <span class="built_in">unit</span>(<span class="selector-tag">a</span>,px)</span><br><span class="line">  <span class="selector-tag">b</span> = <span class="built_in">unit</span>(<span class="selector-tag">b</span>,px)</span><br><span class="line">  return <span class="selector-tag">a</span> + <span class="selector-tag">b</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="built_in">add</span>(<span class="number">10%</span>,<span class="number">2em</span>) // <span class="number">12px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>函数也可以模拟多个<code>返回值</code></li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">()</span></span></span><br><span class="line">  <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span> <span class="number">40px</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="built_in">add</span>()[<span class="number">0</span>] // <span class="number">10px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>add</code>函数由于没有<code>return</code>关键字，所以第一行的结果就是返回值，此时返回的是一个<code>list</code>结构，<code>.box</code>在调用的时候，此时可以通过<code>list</code>的下标枚举从而获取数组中某一项的值，以此来模拟函数的多个返回值</li>
<li>函数内部可以设置条件语句</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">boo</span><span class="params">(val)</span></span></span><br><span class="line">  <span class="keyword">if</span> val is <span class="selector-tag">a</span> <span class="string">&#x27;string&#x27;</span></span><br><span class="line">    <span class="string">&quot;yes&quot;</span></span><br><span class="line">  <span class="keyword">else</span></span><br><span class="line">    <span class="string">&quot;no&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="built_in">boo</span>(<span class="string">&quot;100px&quot;</span>) // <span class="string">&quot;no&quot;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面<code>boo</code>内部的if语句的含义是：如果<code>val</code>的值是字符串类型则返回<code>yes</code>，否则返回<code>no</code></li>
<li><code>is a</code>是<code>stylus</code>提供检测类型的<code>api</code></li>
<li>函数也有<code>arguments</code>参数</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">boo</span><span class="params">()</span></span></span><br><span class="line">  return arguments</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="built_in">boo</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="number">300</span>,<span class="number">400</span>) //</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100</span> <span class="number">200</span> <span class="number">300</span> <span class="number">400</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="条件语句"><a href="#条件语句" class="headerlink" title="条件语句"></a>条件语句</h2><ol>
<li>语法：</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>表达式</span><br><span class="line">	符合条件的代码</span><br></pre></td></tr></table></figure>
<ol>
<li><code>if</code>表达式满足<code>true</code>的时候，执行后面的代码块，否则继续执行<code>else if</code>或者<code>else</code>的结果</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">ispadding = true;</span><br><span class="line"><span class="keyword">if</span> ispadding</span><br><span class="line">  <span class="attribute">padding</span>(y,x)</span><br><span class="line">    <span class="attribute">padding</span> arguments</span><br><span class="line">    <span class="attribute">margin</span> y,x</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> <span class="number">10px</span> <span class="number">20px</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>也有<code>else if</code>和<code>else</code></li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">num</span><span class="params">(x,y, num = <span class="number">1</span>)</span></span></span><br><span class="line">  <span class="keyword">if</span> num == <span class="number">1</span></span><br><span class="line">    <span class="attribute">padding</span> y - x</span><br><span class="line">  <span class="keyword">else</span> <span class="keyword">if</span> num == <span class="number">2</span></span><br><span class="line">    <span class="attribute">padding</span> y + x</span><br><span class="line">  <span class="keyword">else</span></span><br><span class="line">    <span class="attribute">padding</span> y * x</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="built_in">num</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="number">1</span>) <span class="comment">// 100</span></span><br><span class="line">  <span class="built_in">num</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="number">2</span>) <span class="comment">// 300</span></span><br><span class="line">  <span class="built_in">num</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="number">3</span>) <span class="comment">// 20000</span></span><br></pre></td></tr></table></figure>
<ol>
<li>条件语句除了<code>if（如果）</code>还有<code>unless</code>（除非）</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">unless ispadding is defined</span><br><span class="line">  <span class="attribute">padding</span>(x,y)</span><br><span class="line">    <span class="attribute">padding</span> arguments</span><br><span class="line">    <span class="attribute">margin</span> arguments</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> <span class="number">100px</span> <span class="number">200px</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>unless</code>所表达的含义是除非<code>ispadding</code>是没有被定义的，否则就不加载下面的代码，<code>is defined</code>检测的是当前的变量是否被定义了</li>
</ol>
<h2 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h2><ol>
<li>语法：</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> 变量名称 <span class="keyword">in</span> list（数组）</span><br></pre></td></tr></table></figure>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="keyword">for</span> num <span class="keyword">in</span> <span class="number">100</span> <span class="number">200</span> <span class="number">300</span> <span class="number">400</span></span><br><span class="line">    <span class="attribute">padding</span> num</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">100</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">200</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">300</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">400</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>for</code>表示定义一个循环，<code>num</code>表示当前每一次循环的变量，<code>in</code>表示要遍历后面的内容</li>
</ol>
<h2 id="extend扩展-2"><a href="#extend扩展-2" class="headerlink" title="extend扩展"></a>extend扩展</h2><ol>
<li><code>stylus</code>的扩展和<code>sass</code>比较像，和<code>less</code>不同</li>
<li>基本使用</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="keyword">@extend</span> .style</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>如果有伪类，也会扩展</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="selector-pseudo">:hover</span></span><br><span class="line">    <span class="attribute">color</span> red</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="keyword">@extend</span> .style</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.style</span> <span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-class">.box</span> <span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f00</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>和<code>sass</code>不同的是<code>stylus</code>可以扩展嵌套选择器，<code>sass</code>是不支持的</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span></span><br><span class="line">  <span class="attribute">width</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">  <span class="attribute">background</span> orange</span><br><span class="line">  <span class="selector-class">.inner</span></span><br><span class="line">    <span class="attribute">font-size</span> <span class="number">10px</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="keyword">@extend</span> <span class="selector-class">.style</span> .inner</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中<code>extend</code>扩展的是<code>.style</code>内部的<code>.inner</code></li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.style</span> <span class="selector-class">.inner</span>,</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>导入</li>
<li>导入普通的<code>.css</code>文件</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;import.css&quot;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>如果不写拓展名，表示导入<code>styl</code>格式的文件</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;import&quot;</span></span><br></pre></td></tr></table></figure>
<h2 id="内置函数-2"><a href="#内置函数-2" class="headerlink" title="内置函数"></a>内置函数</h2><h3 id="检测颜色函数"><a href="#检测颜色函数" class="headerlink" title="检测颜色函数"></a>检测颜色函数</h3><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">函数名称及描述</th>
<th style="text-align:center">示例</th>
<th style="text-align:center">执行结果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">red函数表示的是该颜色值中红色的比重，区间在0-255之间</td>
<td style="text-align:center">red(#abc)</td>
<td style="text-align:center">170</td>
</tr>
<tr>
<td style="text-align:center">green函数表示的是该颜色值中绿色的比重，区间在0-255之间</td>
<td style="text-align:center">red(#abc)</td>
<td style="text-align:center">187</td>
</tr>
<tr>
<td style="text-align:center">blue函数表示的是该颜色值中蓝色的比重，区间在0-255之间</td>
<td style="text-align:center">red(#abc)</td>
<td style="text-align:center">204</td>
</tr>
<tr>
<td style="text-align:center">alpha函数表示该颜色的透明度比重</td>
<td style="text-align:center">alpha(rgba(100,200,123,0.7))</td>
<td style="text-align:center">0.7</td>
</tr>
<tr>
<td style="text-align:center">dark函数表示检查当前的颜色值是否是暗色，返回的是布尔值</td>
<td style="text-align:center">dark(black)</td>
<td style="text-align:center">true</td>
</tr>
<tr>
<td style="text-align:center">dark函数表示检查当前的颜色值是否是亮色，返回的是布尔值</td>
<td style="text-align:center">light(rgb(100,200,123))</td>
<td style="text-align:center">true</td>
</tr>
<tr>
<td style="text-align:center">hue函数表示返回当前颜色的色调</td>
<td style="text-align:center">hue(rgb(100,200,123))</td>
<td style="text-align:center">133.8deg;</td>
</tr>
<tr>
<td style="text-align:center">saturation函数表示返回当前颜色的饱和度</td>
<td style="text-align:center">saturation(rgb(100,200,123))}</td>
<td style="text-align:center">47.61904761904762%;</td>
</tr>
</tbody>
</table>
</div>
<h3 id="设置颜色函数"><a href="#设置颜色函数" class="headerlink" title="设置颜色函数"></a>设置颜色函数</h3><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">函数名称及描述</th>
<th style="text-align:center">示例</th>
<th style="text-align:center">执行结果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">rgb函数会返回一个16进制的颜色值</td>
<td style="text-align:center">rgb(100,200,123)</td>
<td style="text-align:center">#64c87b</td>
</tr>
<tr>
<td style="text-align:center">lighten函数会增亮该颜色，接收两个参数，第一个参数是要增亮的颜色值，第二个参数是增亮程度</td>
<td style="text-align:center">lighten(#000,100%)</td>
<td style="text-align:center">#fff;</td>
</tr>
<tr>
<td style="text-align:center">darken函数会变暗该颜色，接收两个参数，第一个参数是要变暗的颜色值，第二个参数是变暗程度</td>
<td style="text-align:center">darken (#fff,100%)</td>
<td style="text-align:center">#000;</td>
</tr>
<tr>
<td style="text-align:center">saturate会增加该颜色的饱和度，接收两个参数，第一个参数是要增加饱和度的颜色值，第二个参数是增加程度</td>
<td style="text-align:center">saturate(#abc,40%)</td>
<td style="text-align:center">#a3bbd3</td>
</tr>
<tr>
<td style="text-align:center">desaturate会减少该颜色的饱和度，接收两个参数，第一个参数是要减少饱和度的颜色值，第二个参数是减少程度</td>
<td style="text-align:center">desaturate(#abc,40%)</td>
<td style="text-align:center">#b1bbc5;</td>
</tr>
<tr>
<td style="text-align:center">invert函数会返回该颜色反转颜色</td>
<td style="text-align:center">invert(#ff0)</td>
<td style="text-align:center">#00f</td>
</tr>
</tbody>
</table>
</div>
<h3 id="数学函数-1"><a href="#数学函数-1" class="headerlink" title="数学函数"></a>数学函数</h3><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">函数名称及描述</th>
<th style="text-align:center">示例</th>
<th style="text-align:center">运行结果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">abs绝对值</td>
<td style="text-align:center">abs(-100px)</td>
<td style="text-align:center">100px</td>
</tr>
<tr>
<td style="text-align:center">ceil向上取整</td>
<td style="text-align:center">ceil(10.01)</td>
<td style="text-align:center">11</td>
</tr>
<tr>
<td style="text-align:center">floor向下取整</td>
<td style="text-align:center">floor(10.99)</td>
<td style="text-align:center">10</td>
</tr>
<tr>
<td style="text-align:center">round四舍五入</td>
<td style="text-align:center">round(3.5)</td>
<td style="text-align:center">4</td>
</tr>
<tr>
<td style="text-align:center">min和max取最大值和最小值</td>
<td style="text-align:center">min(100,200,123)max(100,200,123)</td>
<td style="text-align:center">100200</td>
</tr>
<tr>
<td style="text-align:center">even判断当前是否为偶数</td>
<td style="text-align:center">even(100px)even(101px)</td>
<td style="text-align:center">truefalse</td>
</tr>
<tr>
<td style="text-align:center">odd判断当前是否为偶数</td>
<td style="text-align:center">odd(100px)odd(101px)</td>
<td style="text-align:center">falsetrue</td>
</tr>
<tr>
<td style="text-align:center">sum累加</td>
<td style="text-align:center">sum(101px 10px 6px)sum(100px 50%)</td>
<td style="text-align:center">117px150px</td>
</tr>
<tr>
<td style="text-align:center">avg求平均数</td>
<td style="text-align:center">avg(100px 30px 20px)</td>
<td style="text-align:center">50px</td>
</tr>
</tbody>
</table>
</div>
<h3 id="列表函数-2"><a href="#列表函数-2" class="headerlink" title="列表函数"></a>列表函数</h3><ol>
<li><code>length</code>表示获取当前数组的长度</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">width</span> <span class="built_in">length</span>(list) //<span class="number">5</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>push</code>表示在尾部插入数组内容</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span></span><br><span class="line">  <span class="built_in">push</span>(list,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>)</span><br><span class="line">  <span class="selector-class">.box</span></span><br><span class="line">    <span class="attribute">width</span> <span class="built_in">length</span>(list)</span><br><span class="line">    <span class="attribute">padding</span> list // <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span></span><br></pre></td></tr></table></figure>
<ol>
<li>第一个参数是要插入的list数组，剩余参数表示插入项</li>
<li><code>unshift</code>表示头部插入</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span></span><br><span class="line"><span class="function"><span class="title">unshift</span><span class="params">(list,<span class="number">99</span>,<span class="number">88</span>)</span></span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box</span></span><br><span class="line">  <span class="attribute">padding</span> list // <span class="number">88</span>,<span class="number">99</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>shift</code>表示头部删除</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span></span><br><span class="line"><span class="function"><span class="title">unshift</span><span class="params">(list)</span></span> <span class="comment">// 2,3,4,5</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>pop</code>表示尾部删除</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">list = <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span></span><br><span class="line"><span class="function"><span class="title">pop</span><span class="params">(list)</span></span> <span class="comment">//1,2,3,4</span></span><br></pre></td></tr></table></figure>
<h3 id="其他函数-2"><a href="#其他函数-2" class="headerlink" title="其他函数"></a>其他函数</h3><ol>
<li><code>typeof</code>表示检查当前的数据类型</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">typeof</span><span class="params">(<span class="string">&quot;100px&quot;</span>)</span></span> <span class="comment">// string</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>unit</code>表示设定单位</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">unit</span><span class="params">(<span class="number">200</span>,px)</span></span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>unquote</code>表示去除字符串</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">unit = <span class="string">&quot;100px&quot;</span></span><br><span class="line">  <span class="selector-class">.box</span></span><br><span class="line">    <span class="attribute">padding</span> <span class="built_in">unquote</span>(unit) //<span class="number">100px</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>s</code>方法功能和<code>unquote</code>类似，但是<code>s</code>方法的真正本质是有插值的含义</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">s</span><span class="params">(<span class="string">&quot;rgba(%s,%s,%s)&quot;</span>,<span class="number">100</span>,<span class="number">200</span>,<span class="number">123</span>)</span></span> <span class="comment">// rgb(100,200,123)</span></span><br></pre></td></tr></table></figure>
<ol>
<li>上面<code>s</code>方法第一个参数是一个字符串的结构<code>%s</code>表示要插值的位置，从第二个参数开始表示要插值的内容</li>
<li><code>operate</code>方法表示使用指定操作符进行计算</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">operate</span><span class="params">(<span class="string">&quot;+&quot;</span>,<span class="number">200</span>,<span class="number">100</span>)</span></span> <span class="comment">// 300</span></span><br><span class="line"><span class="function"><span class="title">operate</span><span class="params">(<span class="string">&quot;-&quot;</span>,<span class="number">200</span>,<span class="number">100</span>)</span></span> <span class="comment">// 100</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>warn</code>和<code>error</code>信息提示</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">()</span></span></span><br><span class="line">  <span class="built_in">warn</span>(<span class="string">&quot;warn message&quot;</span>)</span><br><span class="line">  <span class="number">100px</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>error</code>信息提示</li>
</ol>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">add</span><span class="params">()</span></span></span><br><span class="line">  <span class="built_in">error</span>(<span class="string">&quot;warn message&quot;</span>)</span><br><span class="line">  <span class="number">100px</span></span><br></pre></td></tr></table></figure>
<h1 id="gulp"><a href="#gulp" class="headerlink" title="gulp"></a>gulp</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><ol>
<li>官网地址：<a target="_blank" rel="noopener" href="https://www.gulpjs.com.cn/">https://www.gulpjs.com.cn/</a></li>
<li><code>gulp</code>是基于<code>node</code>开发的构建工具</li>
<li><code>gulp</code>的特点就是基于<code>node</code>流，并且是任务化的工具</li>
<li>相对于<code>webpack</code>来说，<code>gulp</code>是一个轻量级工具</li>
<li>和<code>webpack</code>对比各自的优缺点</li>
</ol>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">描述</th>
<th style="text-align:center">gulp</th>
<th style="text-align:center">webpack</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">定位</td>
<td style="text-align:center">基于任务流的打包工具</td>
<td style="text-align:center">模块化打包工具</td>
</tr>
<tr>
<td style="text-align:center">优点</td>
<td style="text-align:center">易于学习和理解，适合多页面应用开发</td>
<td style="text-align:center">可以模块化的打包任何资源，适合单页面应用开发</td>
</tr>
<tr>
<td style="text-align:center">缺点</td>
<td style="text-align:center">不适用于多页面开发</td>
<td style="text-align:center">学习成本高，配置比较复杂，打包后的体积过大</td>
</tr>
</tbody>
</table>
</div>
<h2 id="安装和基本使用-1"><a href="#安装和基本使用-1" class="headerlink" title="安装和基本使用"></a>安装和基本使用</h2><ol>
<li>我们需要全局安装<code>gulp-cli</code>，项目中安装<code>gulp</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install -g gulp-cli</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm instll gulp -D</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是我们学习的是<code>glup4</code>版本和<code>3</code>版本是有一些区别的</li>
<li><code>gulp</code>和<code>webpack</code>一样有自己的指导文件，<code>gulpfile.js</code>命名</li>
<li>设置文件目录结构</li>
</ol>
<blockquote>
<p>┣ gulpfile.js</p>
<p>┣ src</p>
<p>│┣ index.html</p>
</blockquote>
<ol>
<li>配置gulpfile.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">&quot;gulp&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个packhtml任务</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;packhtml&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 执行任务的路径，pipe不是gulp的方法，而是node的，dest表示处理完之后输出的目录</span></span><br><span class="line">  gulp.<span class="title function_">src</span>(<span class="string">&quot;./src/index.html&quot;</span>).<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./dist/index.html&quot;</span>))</span><br><span class="line">	<span class="comment">// done表示任务执行完毕的回调函数</span></span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>index.html</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-glup<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>输入命名执行任务</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">glup packhtml</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://s1.ax1x.com/2022/12/18/zbzkJs.png" alt=""></p>
<h2 id="Node-stream"><a href="#Node-stream" class="headerlink" title="Node stream"></a>Node stream</h2><ol>
<li>参考：<a target="_blank" rel="noopener" href="https://www.runoob.com/nodejs/nodejs-stream.html">https://www.runoob.com/nodejs/nodejs-stream.html</a></li>
<li>Stream 是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对http 服务器发起请求的request 对象就是一个 Stream</li>
<li>Node流一共有4种类型<ol>
<li>Readable - 可读操作。</li>
<li>Writable - 可写操作。</li>
<li>Duplex - 可读可写操作.</li>
<li>Transform - 操作被写入数据，然后读出结果</li>
</ol>
</li>
<li>我们设置创建一个可读流程</li>
<li>我们创建一个<code>input.txt</code>文件来设置可以读取的文件</li>
</ol>
<figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">你好 www.baidu.com</span><br></pre></td></tr></table></figure>
<ol>
<li>main.js文件入口文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="comment">// 创建data变量</span></span><br><span class="line"><span class="keyword">var</span> data = <span class="string">&quot;&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建可读流</span></span><br><span class="line"><span class="keyword">var</span> readerStream = fs.<span class="title function_">createReadStream</span>(<span class="string">&#x27;input.txt&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置编码为 utf8。</span></span><br><span class="line">readerStream.<span class="title function_">setEncoding</span>(<span class="string">&#x27;UTF8&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理流事件 --&gt; data, end, and error</span></span><br><span class="line">readerStream.<span class="title function_">on</span>(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">function</span> (<span class="params">chunk</span>) &#123;</span><br><span class="line">   data += chunk;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 当没有更多数据的时候出发</span></span><br><span class="line">readerStream.<span class="title function_">on</span>(<span class="string">&#x27;end&#x27;</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(data,<span class="string">&#x27;得到的data&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 当发生错误的时候触发</span></span><br><span class="line">readerStream.<span class="title function_">on</span>(<span class="string">&#x27;error&#x27;</span>, <span class="keyword">function</span>(<span class="params">err</span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(err.<span class="property">stack</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;程序执行完毕&quot;</span>);</span><br></pre></td></tr></table></figure>
<ol>
<li>此时执行命令</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node main.js</span><br></pre></td></tr></table></figure>
<ol>
<li>我们在<code>glup</code>中使用的是管道流或者是链式流</li>
<li>管道提供了一个输出流到输入流的机制。通常我们用于从一个流中获取数据并将数据传递到另外一个流中</li>
</ol>
<p><img src= "" data-lazy-src="https://s1.ax1x.com/2022/12/18/zbz1Y9.png" alt=""></p>
<ol>
<li>如上面的图片所示，我们把文件比作装水的桶，而水就是文件里的内容，我们用一根管子(<code>pipe</code>)连接两个桶使得水从一个桶流入另一个桶，这样就慢慢的实现了大文件的复制过程。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个可读流</span></span><br><span class="line"><span class="keyword">var</span> readerStream = fs.<span class="title function_">createReadStream</span>(<span class="string">&#x27;input.txt&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个可写流</span></span><br><span class="line"><span class="keyword">var</span> writerStream = fs.<span class="title function_">createWriteStream</span>(<span class="string">&#x27;writestream.txt&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 管道读写操作</span></span><br><span class="line"><span class="comment">// 读取 input.txt 文件内容，并将内容写入到 output.txt 文件中</span></span><br><span class="line">readerStream.<span class="title function_">pipe</span>(writerStream);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;程序执行完毕&quot;</span>);</span><br></pre></td></tr></table></figure>
<ol>
<li>链式流</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="comment">// 压缩功能</span></span><br><span class="line"><span class="keyword">var</span> zlib = <span class="built_in">require</span>(<span class="string">&#x27;zlib&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 input.txt 文件为 input.txt.gz</span></span><br><span class="line">fs.<span class="title function_">createReadStream</span>(<span class="string">&#x27;input.txt&#x27;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(zlib.<span class="title function_">createGzip</span>())</span><br><span class="line">  .<span class="title function_">pipe</span>(fs.<span class="title function_">createWriteStream</span>(<span class="string">&#x27;input.txt.gz&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;文件压缩完成。&quot;</span>);</span><br></pre></td></tr></table></figure>
<h2 id="gulp的内置函数"><a href="#gulp的内置函数" class="headerlink" title="gulp的内置函数"></a>gulp的内置函数</h2><h3 id="gulp-task"><a href="#gulp-task" class="headerlink" title="gulp.task()"></a>gulp.task()</h3><ol>
<li>之前我们了解到<code>gulp</code>是基于任务化的，也就是说<code>gulp</code>根据<code>task</code>函数来执行任务流程的</li>
<li>基本语法</li>
</ol>
<blockquote>
<p>gulp.task(name,fn)</p>
<p>name为任务名称</p>
<p>fn为执行任务的函数</p>
</blockquote>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第1个任务！&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>执行命令</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp task1</span><br></pre></td></tr></table></figure>
<ol>
<li><code>gulp</code>的工作流程就是<code>gulp</code>会找到<code>gulpfile.js</code>文件，然后在这个指导文件中找到<code>task1</code>任务并执行</li>
<li>如果只执行<code>gulp</code>后面没有任务名称，会自动找<code>default</code>任务</li>
<li><code>task1</code>是任务的名称，第二个参数是执行任务的函数，函数中有回调函数，如果此时我们不执行这个回调函数，会报错，并且不会继续执行后面的任务（<code>gulp4</code>版本提供的回调函数，<code>gulp3</code>以及以下是没有回调函数概念的）</li>
<li>红色报错的文字翻译过来就是：以下的任务没有完成：<code>task1</code>；你是否忘记了发送异步完成的信号</li>
<li>我们可以通过三种方式来阻止报错并且不阻断任务的流程</li>
<li>第一种方式执行任务的回调函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第1个任务！&quot;</span>);</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>再次执行命令</li>
<li>第二种方式设置<code>promise</code>对象</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第1个任务&quot;</span>);</span><br><span class="line">      <span class="title function_">resolve</span>()</span><br><span class="line">    &#125;,<span class="number">1000</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>第三种方式就是将回调设置给事件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/index.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>)).<span class="title function_">on</span>(<span class="string">&quot;end&quot;</span>,done)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>如果同时设置了多个任务，都要执行，应该如何操作？</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第1个任务&quot;</span>);</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task2&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第2个任务&quot;</span>);</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task3&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第3个任务&quot;</span>);</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>此时如果每一个任务都执行一次<code>gulp</code>命令，势必效率非常低</li>
</ol>
<h3 id="gulp-series-和gulp-parallel"><a href="#gulp-series-和gulp-parallel" class="headerlink" title="gulp.series()和gulp.parallel()"></a>gulp.series()和gulp.parallel()</h3><ol>
<li><code>series</code>和<code>parallel</code>是<code>gulp4</code>版本提供的方法，<code>3</code>以及以下版本是没有</li>
<li><code>series</code>方法是按顺序依次执行任务</li>
<li><code>parallel</code>方法是并行执行任务</li>
<li>先来验证<code>series</code>方法</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第1个任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">3000</span>)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task2&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第2个任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">2000</span>)</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task3&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第3个任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;default&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;task1&quot;</span>, <span class="string">&quot;task2&quot;</span>, <span class="string">&quot;task3&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;都执行完毕了&quot;</span>)</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<ol>
<li>发现任务是依次执行的，三秒之后先执行任务1，任务1执行完两秒之后执行任务2，任务2执行完1秒后执行任务1，都执行完毕之后执行<code>series</code>的回调</li>
<li>再来验证<code>parallel</code>方法</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第1个任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">3000</span>)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task2&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第2个任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">2000</span>)</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;task3&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行第3个任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;default&quot;</span>, <span class="title function_">parallel</span>(<span class="string">&quot;task1&quot;</span>, <span class="string">&quot;task2&quot;</span>, <span class="string">&quot;task3&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;都执行完毕了&quot;</span>)</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<ol>
<li>发现<code>parallel</code>是并行执行的，同时会执行<code>task1</code>、<code>task2</code>、<code>task3</code>、总耗时是<code>3s</code>，是因为最长任务时间就是<code>task1</code>的<code>3s</code></li>
<li><code>series</code>和<code>parallel</code>也可以结合使用</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;default&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;task1&quot;</span>, <span class="title function_">parallel</span>(<span class="string">&quot;task2&quot;</span>, <span class="string">&quot;task3&quot;</span>), <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;都执行完毕了&quot;</span>)</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<ol>
<li>结果是由于设置的是<code>series</code>，所以<code>3s</code>之后先执行任务<code>1</code>，然后由于第二个任务是一个并行执行的<br>2.<code>parallel</code>，此时由于任务<code>3</code>是<code>1s</code>，任务<code>2</code>是<code>2s</code>；所以先输出任务<code>3</code>，然后再输出任务<code>2</code>，所有的任务执行完毕之后再执行<code>series</code>的回调</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;default&quot;</span>, <span class="title function_">parallel</span>(<span class="string">&quot;task1&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;task2&quot;</span>, <span class="string">&quot;task3&quot;</span>), <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;都执行完毕了&quot;</span>)</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<ol>
<li>结果是由于执行的<code>parallel</code>，所以先输出<code>parallel</code>的回调，然后同时任务<code>1</code>和<code>series</code>内部的两个任务，又由于任务2的时间是<code>2s</code>，而任务<code>1</code>的时间是<code>3s</code>，所以先输出任务<code>2</code>，然后再输出任务1和任务3</li>
<li><code>gulp3</code>以及以下版本的多任务执行是下面的代码，不支持上面的方法的</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;default&quot;</span>, [<span class="string">&#x27;task1&#x27;</span>,<span class="string">&#x27;task2&#x27;</span>,<span class="string">&#x27;task3&#x27;</span>], <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;都执行完毕了&quot;</span>)</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="gulp-src"><a href="#gulp-src" class="headerlink" title="gulp.src()"></a>gulp.src()</h3><ol>
<li>创建一个流用于从系统中读取文件</li>
<li>语法：</li>
</ol>
<blockquote>
<p>src(globs,[options])</p>
<p>globs表示待处理的文件路径，可以是字符串或者数组</p>
<p>options为可选配置项，通常情况下我们不需要配置</p>
</blockquote>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/index.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li><code>src</code>内部的参数是要创建的文件流路径，读取该文件后进入到管道，然后经过dest处理输出到指定目录</li>
<li>此时如果我们要读取的文件不止一个？怎么办？</li>
</ol>
<blockquote>
<p>┣ src</p>
<p>│┣ index.html</p>
<p>│┣ content.html</p>
</blockquote>
<ol>
<li>上面结构中除了<code>index.html</code>之外还有<code>content.html</code>文件，此时我们如何让<code>src</code>方法同时读取两个文件？</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/*.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的路径表示读取<code>src</code>目录下面的所有<code>.html</code>文件结尾的文件（不包含内部文件夹的）</li>
<li>如果结构目录更复杂</li>
</ol>
<blockquote>
<p>┣ src</p>
<p>│┣ index.html</p>
<p>│┣ header</p>
<p>││┣ content.html</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的文件目录表示读取<code>src</code>目录下所有的<code>.html</code>文件，内部有文件夹的（常用写法）</li>
<li>也可以使用数组实现多匹配模式，多匹配模式一般用于配置多用文件类型的</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>([<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="string">&quot;./src/**/*.js&quot;</span>,<span class="string">&quot;./src/**/*.css&quot;</span>]).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>也可以使用<code>!</code>来进行排除</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>([<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="string">&quot;!./src/header/content.html&quot;</span>]).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>读取之后会忽略<code>content.html</code>文件</li>
</ol>
<h3 id="gulp-dest"><a href="#gulp-dest" class="headerlink" title="gulp.dest()"></a>gulp.dest()</h3><ol>
<li>创建一个用于将文件写入到系统的流</li>
<li>基本语法</li>
</ol>
<blockquote>
<p>dest(path,[options])</p>
<p>path表示写入文件的路径</p>
<p>options表示可选的参数，通常我们不需要配置</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>([<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="string">&quot;!./src/header/content.html&quot;</span>]).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>需要注意的是<code>dest</code>只能将文件流输出，不具备重命名的功能，如果要重命名，需要插件</li>
</ol>
<h3 id="gulp-watch"><a href="#gulp-watch" class="headerlink" title="gulp.watch()"></a>gulp.watch()</h3><ol>
<li><code>watch</code>的作用是监听文件，然后执行任务或者函数</li>
<li>语法：</li>
</ol>
<blockquote>
<p>watch(globs,[options],[task])</p>
<p>globs表示监听的路径，可以监听一个或者多个</p>
<p>options表示配置项，一般不需要配置</p>
<p>task表示任务函数或者前置任务</p>
</blockquote>
<ol>
<li>基本使用：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">watch</span>(<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="title function_">parallel</span>(<span class="string">&quot;html&quot;</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>第一个参数表示监听文件的路径，第二个参数表示当该路径的文件发生改变的时候执行的任务或者函数</li>
<li>监听多个文件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">watch</span>([<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="string">&quot;./src/**/*.css&quot;</span>],<span class="title function_">parallel</span>(<span class="string">&quot;html&quot;</span>,<span class="string">&quot;css&quot;</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>如果想排除某一个文件，也可以使用!来排除</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">watch</span>([<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="string">&quot;./src/**/*.css&quot;</span>,<span class="string">&quot;!./src/content.html&quot;</span>],<span class="title function_">parallel</span>(<span class="string">&quot;html&quot;</span>,<span class="string">&quot;css&quot;</span>))</span><br></pre></td></tr></table></figure>
<h2 id="gulp的常用插件"><a href="#gulp的常用插件" class="headerlink" title="gulp的常用插件"></a>gulp的常用插件</h2><ol>
<li>上面<code>gulp</code>工作完之后发现代码都是映射关系，没有任何的变化</li>
<li><code>gulp</code>对于文件的处理都是基于插件的</li>
<li>地址：<a target="_blank" rel="noopener" href="https://gulpjs.com/plugins/">https://gulpjs.com/plugins/</a></li>
<li>所有的插件都需要安装</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install ** -D</span><br></pre></td></tr></table></figure>
<h3 id="配置html文件-1"><a href="#配置html文件-1" class="headerlink" title="配置html文件"></a>配置html文件</h3><blockquote>
<p>插件名称：gulp-file-include</p>
<p>作用：提取公共文件的</p>
</blockquote>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fileinclude = <span class="built_in">require</span>(<span class="string">&quot;gulp-file-include&quot;</span>);</span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">fileinclude</span>()).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>./src/index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;css/index.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  @@include(&quot;./common/header.html&quot;)</span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-gulp<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>编译后的样式，你可以发现公共样式提取出来了</li>
</ol>
<ol>
<li><code>gulp-file-include</code>函数有配置项</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">fileinclude</span>(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">prefix</span>: <span class="string">&#x27;@&#x27;</span>,</span><br><span class="line">      <span class="attr">basepath</span>: <span class="string">&#x27;./src/common&#x27;</span></span><br><span class="line">	  <span class="attr">indent</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  )).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>prefix</code>表示设置引入前缀，默认是 <code>@@</code></li>
<li><code>basepath</code>表示设置引入路径</li>
<li><code>indent</code>表示是否保留缩进</li>
</ol>
<ol>
<li>还可以设置模板</li>
<li>./src/index.html:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  @@include(&quot;header.html&quot;,&#123;</span><br><span class="line">    item1: &quot;新闻&quot;,</span><br><span class="line">    item2: &quot;娱乐&quot;,</span><br><span class="line">    item3: &quot;体育&quot;,</span><br><span class="line">    item4: &quot;科技&quot;,</span><br><span class="line">    item5: &quot;生活&quot;,</span><br><span class="line">    item6: &quot;其他&quot;,</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-gulp<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>./common/header.html模板:</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;header&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>@@item1<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>@@item2<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>@@item3<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>@@item4<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>@@item5<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>@@item6<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>一共接收两个参数，第一个参数表示引入模板的路径，第二个参数表示设置给模板的参数</li>
<li><code>include_once</code>表示只渲染一次</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  @@include_once(&quot;header.html&quot;,&#123;</span><br><span class="line">    item1: &quot;新闻&quot;,</span><br><span class="line">    item2: &quot;娱乐&quot;,</span><br><span class="line">    item3: &quot;体育&quot;,</span><br><span class="line">    item4: &quot;科技&quot;,</span><br><span class="line">    item5: &quot;生活&quot;,</span><br><span class="line">    item6: &quot;其他&quot;,</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-gulp<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>1.<code>@@if</code>表示条件控制语句</p>
<ol>
<li>我们需要再<code>gulpfile.js</code>文件的<code>context</code>中配置</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fileinclude</span>(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">basepath</span>: <span class="string">&#x27;./src/common&#x27;</span>,</span><br><span class="line">      <span class="attr">indent</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">context</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  )</span><br></pre></td></tr></table></figure>
<ol>
<li>模板</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">          @@if(name == &#x27;小明&#x27;) &#123;</span><br><span class="line">            @name</span><br><span class="line">          &#125;</span><br><span class="line">      <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>@@for</code>循环语句</li>
<li>gulpfile.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fileinclude</span>(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">basepath</span>: <span class="string">&#x27;./src/common&#x27;</span>,</span><br><span class="line">      <span class="attr">indent</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">context</span>: &#123;</span><br><span class="line">        <span class="attr">arr</span>:[<span class="string">&quot;新闻&quot;</span>,<span class="string">&quot;娱乐&quot;</span>,<span class="string">&quot;体育&quot;</span>,<span class="string">&quot;科技&quot;</span>,<span class="string">&quot;生活&quot;</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  )</span><br></pre></td></tr></table></figure>
<ol>
<li>模板：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  @@for (var i = 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>`+arr[i]+`<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li><code>@@loop</code>表示循环文件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  @@loop(&#x27;loop-article.html&#x27;, [</span><br><span class="line">    &#123; &quot;title&quot;: &quot;My post title&quot;, &quot;text&quot;: &quot;<span class="tag">&lt;<span class="name">p</span>&gt;</span>lorem ipsum...<span class="tag">&lt;/<span class="name">p</span>&gt;</span>&quot; &#125;,</span><br><span class="line">    &#123; &quot;title&quot;: &quot;Another post&quot;, &quot;text&quot;: &quot;<span class="tag">&lt;<span class="name">p</span>&gt;</span>lorem ipsum...<span class="tag">&lt;/<span class="name">p</span>&gt;</span>&quot; &#125;,</span><br><span class="line">    &#123; &quot;title&quot;: &quot;One more post&quot;, &quot;text&quot;: &quot;<span class="tag">&lt;<span class="name">p</span>&gt;</span>lorem ipsum...<span class="tag">&lt;/<span class="name">p</span>&gt;</span>&quot; &#125;</span><br><span class="line">  ])</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>模板：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>@@title<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  @@text</span><br><span class="line"><span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>插件名称：gulp-htmlmin</p>
<p>作用：压缩html代码</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> htmlmin = <span class="built_in">require</span>(<span class="string">&quot;gulp-htmlmin&quot;</span>);</span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>).<span class="title function_">pipe</span>(<span class="title function_">fileinclude</span>()</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">htmlmin</span>(</span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">  	&#125;</span><br><span class="line">))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>collapseWhitespace</code>表示折叠<code>html</code> 的空白，如果不配置，默认是不会压缩<code>html</code>代码的，注意，注释是不会进行折叠的</li>
</ol>
<blockquote>
<p>插件名称：gulp-plumber</p>
<p>作用：阻止编译错误的时候退出watch监听，这个插件是需要在watch监听的情况下生效</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">fileinclude</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">    <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">  &#125;))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="配置css文件"><a href="#配置css文件" class="headerlink" title="配置css文件"></a>配置css文件</h3><blockquote>
<p>插件名称：gulp-less</p>
<p>作用：css预处理-less</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">src</span>(<span class="string">&quot;./src/style/**/*.less&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">less</span>())</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/style&quot;</span>))</span><br></pre></td></tr></table></figure>
<ol>
<li>还有一个压缩<code>css</code>代码的<code>gulp-minify-css</code>，这个插件已经被废弃了，但是也可以实现压缩</li>
<li>我们工作中，会有打包的时候分成两份，一份是生产代码，一份是开发代码，此时我们就需要<code>gulp</code>构建之后生成两份文件</li>
</ol>
<blockquote>
<p>插件名称：gulp-rename</p>
<p>常用配置:</p>
<p>{</p>
<p>dirname: “js”,        文件路径</p>
<p>basename: “main”,    文件名</p>
<p>prefix: “”,        文件名前缀</p>
<p>suffix: “.min”,    文件名后缀</p>
<p>extname: “.js”        文件扩展名</p>
<p>}</p>
<p>作用：重命名文件</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">src</span>(<span class="string">&quot;./src/style/**/*.less&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">less</span>())</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/style&quot;</span>))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">cleancss</span>())</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">rename</span>(&#123;</span><br><span class="line">    <span class="attr">suffix</span>: <span class="string">&quot;.min&quot;</span></span><br><span class="line">  &#125;))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/style&quot;</span>))</span><br></pre></td></tr></table></figure>
<h3 id="配置js文件"><a href="#配置js文件" class="headerlink" title="配置js文件"></a>配置js文件</h3><blockquote>
<p>插件名称：gulp-concat</p>
<p>作用：合并文件</p>
</blockquote>
<ol>
<li>此时我们的<code>js</code>文件目录下有三个文件分别是<code>index.js</code>、<code>a.js</code>、<code>b.js</code></li>
<li>index.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>a.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">200</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">showA</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>b.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">showB</span>(<span class="params">b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> b</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>配置gulpfile.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> concat = <span class="built_in">require</span>(<span class="string">&quot;gulp-concat&quot;</span>)</span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/js/**/*.js&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">concat</span>(<span class="string">&quot;index.js&quot;</span>))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/js&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>concat</code>插件会将所有的js文件无脑合并到<code>index.js</code>文件中</li>
<li>合并完毕后<code>index.js</code>文件：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">showA</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">200</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">showB</span>(<span class="params">b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> b</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>你会发现合并之后<code>js</code>文件一共有三个 <code>var a</code>;此时由于每个文件都有自己的<code>a</code>，会造成全局的不可控</li>
<li>解决这个问题就是从根源入手，在要写相关合并的<code>js</code>文件时候要加<code>IIFE</code></li>
<li>比如index.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">300</span>;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line"><span class="keyword">return</span> a + b</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
<ol>
<li>此时再次进行合并的时候，每一个<code>js</code>文件都有自己的<code>IIFE</code>，互不影响</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">showA</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">200</span>;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">showB</span>(<span class="params">b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> b</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">300</span>;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a + b</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">add</span>(<span class="number">100</span>,<span class="number">200</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
<blockquote>
<p>插件名称：gulp-sourcemaps</p>
<p>作用：一个存储代码与编译代码映射的信息文件</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/js/**/*.js&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">init</span>()) <span class="comment">// 开始标记map记录的始发点</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">concat</span>(<span class="string">&quot;index.js&quot;</span>))</span><br><span class="line">  .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">write</span>(<span class="string">&quot;../maps&quot;</span>)) <span class="comment">// 写入文件</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/js&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>插件名称：gulp-babel @babel/preset-env @babel/core</p>
<p>作用：翻译es6高级语法</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/js/**/*.js&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">init</span>()) <span class="comment">// 标记map记录的始发点</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">babel</span>(&#123;</span><br><span class="line">      <span class="attr">presets</span>: [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">    &#125;))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">concat</span>(<span class="string">&quot;index.js&quot;</span>))</span><br><span class="line">  .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">write</span>(<span class="string">&quot;../maps&quot;</span>)) <span class="comment">// 写入文件</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/js&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>插件名称：gulp-uglify</p>
<p>作用：压缩js文件</p>
</blockquote>
<p>​</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/js/**/*.js&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">init</span>()) <span class="comment">// 标记map记录的始发点</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">babel</span>(&#123;</span><br><span class="line">      <span class="attr">presets</span>: [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">    &#125;))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">concat</span>(<span class="string">&quot;index.js&quot;</span>))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">uglify</span>())</span><br><span class="line">  .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">write</span>(<span class="string">&quot;../maps&quot;</span>)) <span class="comment">// 写入文件</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/js&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="配置图片"><a href="#配置图片" class="headerlink" title="配置图片"></a>配置图片</h3><blockquote>
<p>插件名称：gulp-imagemin</p>
<p>作用：压缩图片</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;image&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&#x27;./src/images/**/*&#x27;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">imagemin</span>(&#123;</span><br><span class="line">    <span class="attr">optimizationLevel</span>: <span class="number">5</span>, <span class="comment">//类型：Number  默认：3  取值范围：0-7（优化等级）</span></span><br><span class="line">    <span class="attr">progressive</span>: <span class="literal">true</span>, <span class="comment">//类型：Boolean 默认：false 无损压缩jpg图片</span></span><br><span class="line">    <span class="attr">interlaced</span>: <span class="literal">true</span>, <span class="comment">//类型：Boolean 默认：false 隔行扫描gif进行渲染</span></span><br><span class="line">    <span class="attr">multipass</span>: <span class="literal">true</span> <span class="comment">//类型：Boolean 默认：false 多次优化svg直到完全优化</span></span><br><span class="line">  &#125;)).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist/images&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="配置服务器"><a href="#配置服务器" class="headerlink" title="配置服务器"></a>配置服务器</h3><blockquote>
<p>插件名称：gulp-connect</p>
<p>作用：配置服务器环境</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">fileinclude</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">    <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">  &#125;))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  .<span class="title function_">pipe</span>(connect.<span class="title function_">reload</span>()) <span class="comment">// 更新该类型文件的时候会自动刷新浏览器</span></span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;server&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 设置服务器</span></span><br><span class="line">  connect.<span class="title function_">server</span>(&#123;</span><br><span class="line">    <span class="attr">root</span>: <span class="string">&quot;./dist&quot;</span>, <span class="comment">// 要运行哪个目录，通常是gulp构建之后的目录</span></span><br><span class="line">    <span class="attr">livereload</span>: <span class="literal">true</span>, <span class="comment">//是否热更新</span></span><br><span class="line">    <span class="attr">port</span>: <span class="number">9999</span> <span class="comment">//端口号</span></span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="title function_">watch</span>(<span class="string">&quot;./src/**/*.html&quot;</span>,<span class="title function_">series</span>(<span class="string">&quot;html&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们需要打开<code>localhost:9999</code>来查看我们构建之后的项目</li>
</ol>
<h3 id="完整基础配置"><a href="#完整基础配置" class="headerlink" title="完整基础配置"></a>完整基础配置</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 基础目录</span></span><br><span class="line"><span class="keyword">const</span> app = &#123;</span><br><span class="line">  <span class="attr">srcPath</span>: <span class="string">&#x27;src/&#x27;</span>,</span><br><span class="line">  <span class="attr">buildPath</span>: <span class="string">&quot;build/&quot;</span>, <span class="comment">//生产目录</span></span><br><span class="line">  <span class="attr">distPath</span>: <span class="string">&quot;dist/&quot;</span> <span class="comment">//开发目录</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 公共配置</span></span><br><span class="line"><span class="keyword">const</span> &#123; task, src, dest, series, parallel, watch &#125; = <span class="built_in">require</span>(<span class="string">&quot;gulp&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> plumber = <span class="built_in">require</span>(<span class="string">&quot;gulp-plumber&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> rename = <span class="built_in">require</span>(<span class="string">&quot;gulp-rename&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> sourcemaps = <span class="built_in">require</span>(<span class="string">&quot;gulp-sourcemaps&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> concat = <span class="built_in">require</span>(<span class="string">&quot;gulp-concat&quot;</span>)</span><br><span class="line"><span class="comment">// 配置HTML</span></span><br><span class="line"><span class="keyword">const</span> fileinclude = <span class="built_in">require</span>(<span class="string">&quot;gulp-file-include&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> htmlmin = <span class="built_in">require</span>(<span class="string">&quot;gulp-htmlmin&quot;</span>);</span><br><span class="line"><span class="comment">// 配置CSS</span></span><br><span class="line"><span class="keyword">const</span> less = <span class="built_in">require</span>(<span class="string">&quot;gulp-less&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> cleanCss = <span class="built_in">require</span>(<span class="string">&quot;gulp-clean-css&quot;</span>)</span><br><span class="line"><span class="comment">// 配置js</span></span><br><span class="line"><span class="keyword">const</span> babel = <span class="built_in">require</span>(<span class="string">&quot;gulp-babel&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> uglify = <span class="built_in">require</span>(<span class="string">&quot;gulp-uglify&quot;</span>)</span><br><span class="line"><span class="comment">// 配置图片</span></span><br><span class="line"><span class="keyword">const</span> imagemin = <span class="built_in">require</span>(<span class="string">&quot;gulp-imagemin&quot;</span>)</span><br><span class="line"><span class="comment">// 配置服务器</span></span><br><span class="line"><span class="keyword">const</span> connect = <span class="built_in">require</span>(<span class="string">&quot;gulp-connect&quot;</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* HTML配置流程：1.阻止报错停止运行，2.提取公共页面，3.提取开发代码，4.压缩，5.提取生产代码 */</span></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;**/*.html&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>()) <span class="comment">// 阻止报错停止运行</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">fileinclude</span>()) <span class="comment">// 提取公共页面</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">distPath</span>)) <span class="comment">// 提取开发代码</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">    <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">  &#125;)) <span class="comment">// 压缩</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">buildPath</span>)) <span class="comment">// 提取生产代码</span></span><br><span class="line">  .<span class="title function_">pipe</span>(connect.<span class="title function_">reload</span>())</span><br><span class="line">  <span class="title function_">done</span>();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/* CSS配置流程：1.阻止报错停止运行，2.css的预处理器，3.提取开发代码，4.压缩并重命名，5.提取生产代码 */</span></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;css&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;style/**/*.less&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>()) <span class="comment">// 阻止报错停止运行</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">less</span>()) <span class="comment">// css预处理器-less</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">distPath</span>+<span class="string">&quot;style&quot;</span>)) <span class="comment">// 提取开发代码</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">cleanCss</span>()) <span class="comment">// 压缩css代码</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">rename</span>(&#123;</span><br><span class="line">      <span class="attr">suffix</span>: <span class="string">&#x27;.min&#x27;</span></span><br><span class="line">    &#125;))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">buildPath</span> + <span class="string">&quot;style&quot;</span>)) <span class="comment">// 提取生产代码</span></span><br><span class="line">  .<span class="title function_">pipe</span>(connect.<span class="title function_">reload</span>()) <span class="comment">//服务热更新</span></span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/* JS配置流程：1.阻止报错停止运行，2.文件目录的映射，3.es语法转换，4.合并js代码，5.提取开发代码，6.压缩并重命名，7.提取生产代码 */</span></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;js/**/*.js&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>()) <span class="comment">// 阻止报错停止运行</span></span><br><span class="line">  .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">init</span>()) <span class="comment">// 开始记录映射</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">babel</span>(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">presets</span>: [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  )) <span class="comment">// es语法转换</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">concat</span>(<span class="string">&quot;index.js&quot;</span>)) <span class="comment">// 合并js代码</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">distPath</span> + <span class="string">&quot;js&quot;</span>))</span><br><span class="line"></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">uglify</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">rename</span>(&#123;</span><br><span class="line">      <span class="attr">suffix</span>: <span class="string">&#x27;.min&#x27;</span></span><br><span class="line">    &#125;)) <span class="comment">//重命名</span></span><br><span class="line">    .<span class="title function_">pipe</span>(sourcemaps.<span class="title function_">write</span>(<span class="string">&quot;../maps/&quot;</span>)) <span class="comment">// 写出文件</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">buildPath</span> + <span class="string">&quot;js&quot;</span>)) <span class="comment">// 提取生产代码</span></span><br><span class="line">  .<span class="title function_">pipe</span>(connect.<span class="title function_">reload</span>()) <span class="comment">//服务热更新</span></span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 图片配置流程：1.阻止报错停止运行，2.图片的压缩，4.提取开发代码，5.提取生产代码 */</span></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;image&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;images/**/*&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>()) <span class="comment">// 阻止报错停止运行</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">imagemin</span>(&#123;</span><br><span class="line">        <span class="attr">optimizationLevel</span>: <span class="number">5</span>, <span class="comment">//类型：Number  默认：3  取值范围：0-7（优化等级）</span></span><br><span class="line">        <span class="attr">progressive</span>: <span class="literal">true</span>, <span class="comment">//类型：Boolean 默认：false 无损压缩jpg图片</span></span><br><span class="line">        <span class="attr">interlaced</span>: <span class="literal">true</span>, <span class="comment">//类型：Boolean 默认：false 隔行扫描gif进行渲染</span></span><br><span class="line">        <span class="attr">multipass</span>: <span class="literal">true</span> <span class="comment">//类型：Boolean 默认：false 多次优化svg直到完全优化</span></span><br><span class="line">    &#125;))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">distPath</span> + <span class="string">&quot;images&quot;</span>)) <span class="comment">// 提取开发代码</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">buildPath</span> + <span class="string">&quot;images&quot;</span>)) <span class="comment">// 提取生产代码</span></span><br><span class="line">  .<span class="title function_">pipe</span>(connect.<span class="title function_">reload</span>()) <span class="comment">//服务热更新</span></span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 公共配置流程：1.阻止报错停止运行，4.提取开发代码，5.提取生产代码 */</span></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;lib&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;lib/**/*&quot;</span>)</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">plumber</span>()) <span class="comment">// 阻止报错停止运行</span></span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">distPath</span> + <span class="string">&quot;lib&quot;</span>)) <span class="comment">// 提取开发代码</span></span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(app.<span class="property">buildPath</span> + <span class="string">&quot;lib&quot;</span>)) <span class="comment">// 提取生产代码</span></span><br><span class="line">  .<span class="title function_">pipe</span>(connect.<span class="title function_">reload</span>()) <span class="comment">//服务热更新</span></span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;build&quot;</span>, <span class="title function_">parallel</span>(<span class="string">&quot;html&quot;</span>,<span class="string">&#x27;css&#x27;</span>,<span class="string">&#x27;js&#x27;</span>,<span class="string">&#x27;image&#x27;</span>,<span class="string">&#x27;lib&#x27;</span>))</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;server&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;build&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  connect.<span class="title function_">server</span>(&#123;</span><br><span class="line">    <span class="attr">root</span>: app.<span class="property">buildPath</span>, <span class="comment">//要执行的目录</span></span><br><span class="line">    <span class="attr">livereload</span>: <span class="literal">true</span>, <span class="comment">//是否热更新</span></span><br><span class="line">    <span class="attr">port</span>: <span class="number">9999</span></span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="title function_">watch</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;**/*.html&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;html&quot;</span>));</span><br><span class="line">  <span class="title function_">watch</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;style/**/*.less&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;css&quot;</span>));</span><br><span class="line">  <span class="title function_">watch</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;js/**/*.js&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;js&quot;</span>));</span><br><span class="line">  <span class="title function_">watch</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;images/**/*&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;image&quot;</span>));</span><br><span class="line">  <span class="title function_">watch</span>(app.<span class="property">srcPath</span> + <span class="string">&quot;lib/**/*&quot;</span>, <span class="title function_">series</span>(<span class="string">&quot;lib&quot;</span>));</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<h2 id="其他配置"><a href="#其他配置" class="headerlink" title="其他配置"></a>其他配置</h2><h3 id="gulp-load-plugins"><a href="#gulp-load-plugins" class="headerlink" title="gulp-load-plugins"></a>gulp-load-plugins</h3><blockquote>
<p>插件名称：gulp-load-plugins</p>
<p>作用：自动加载插件</p>
</blockquote>
<ol>
<li>我们之前引入<code>gulp</code>插件的时候，如果插件的数量很多，会早文件的代码量过大，冗余程度比较高</li>
<li>比如我们之前写的配置插件的引入</li>
<li>你会发现很大一的内容都是引入的插件，此时我们可以利用<code>gulp-load-plugins</code>来整合这些插件的引入</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; task, src, dest, series, parallel, watch &#125; = <span class="built_in">require</span>(<span class="string">&quot;gulp&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> loadPlugin = <span class="built_in">require</span>(<span class="string">&quot;gulp-load-plugins&quot;</span>);</span><br><span class="line"><span class="comment">// 注册自动加载插件的方法</span></span><br><span class="line"><span class="keyword">const</span> plugins = <span class="title function_">loadPlugin</span>();</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(plugins.<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">      <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">    &#125;))</span><br><span class="line">  .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&#x27;./dist&#x27;</span>))</span><br><span class="line">  <span class="title function_">done</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>一共三步走，第一步<code>require</code>引入，第二步执行函数注册，第三步就是在使用的时候进行打点使用即可</li>
</ol>
<h3 id="gulp-inject"><a href="#gulp-inject" class="headerlink" title="gulp-inject"></a>gulp-inject</h3><blockquote>
<p>插件名称：gulp-inject</p>
<p>作用：文件注入</p>
<p>描述：gulp-inject这个插件可以任意位置插入指定的文件列表。它是利用注释来寻找插入的位置</p>
</blockquote>
<ol>
<li>./src/index.html</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- inject:css --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- endinject --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你好-gulp<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- inject:js --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- endinject --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>gulpfile.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;bind&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 引入要插入的流，分别引入了js文件和css文件两个流</span></span><br><span class="line">  <span class="keyword">var</span> sources = <span class="title function_">src</span>([<span class="string">&#x27;./src/js/index.js&#x27;</span>,<span class="string">&#x27;./src/style/index.css&#x27;</span>],&#123;<span class="attr">read</span>: <span class="literal">false</span>&#125;)</span><br><span class="line">  <span class="comment">// 引入被插入的流</span></span><br><span class="line">  <span class="keyword">var</span> target = <span class="title function_">src</span>(<span class="string">&quot;./src/index.html&quot;</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> target.<span class="title function_">pipe</span>(plugins.<span class="title function_">inject</span>(sources))</span><br><span class="line">        .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>gulp-inject</code>是通过注释来识别要注入的文件类型，此时我们需要注意的是这个插件不是无脑的注入，而是有固定类型的注入，比如<code>js</code>文件和<code>css</code>文件</li>
<li>写法规范<ol>
<li><code>&lt;!-- inject:js --&gt;</code>表示注入js文件的位置</li>
<li><code>&lt;!-- inject:css --&gt;</code>表示注入css文件的位置</li>
<li><code>&lt;!-- endinject --&gt;</code>表示注入文件的结束位置</li>
</ol>
</li>
</ol>
<h3 id="gulp-notify"><a href="#gulp-notify" class="headerlink" title="gulp-notify"></a>gulp-notify</h3><blockquote>
<p>插件名称：gulp-notify</p>
<p>作用：消息通知</p>
</blockquote>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;notify&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>).<span class="title function_">pipe</span>(plugins.<span class="title function_">notify</span>(<span class="string">&quot;notify通知&quot;</span>)).<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="gulp-cached"><a href="#gulp-cached" class="headerlink" title="gulp-cached"></a>gulp-cached</h3><blockquote>
<p>插件名称：gulp-cached</p>
<p>作用：编译文件的缓存</p>
</blockquote>
<ol>
<li>我们在开发过程中，会遇到如果代码量特别大，每次热更新的时候，或者<code>watch</code>监听的时候，都会全量更新，势必会造成编译速度越来越慢，开发效率会越来越低</li>
<li>我们可以使用<code>gulp-cached</code>插件将文件的进行缓存，从而实现谁修改更新谁</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> cached = <span class="built_in">require</span>(<span class="string">&quot;gulp-cached&quot;</span>);</span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.js&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">cached</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./js&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>比如我们修改了<code>a.js</code>文件，没修改<code>b.js</code>文件</li>
<li>你会发现<code>a.js</code>的修改日期更新了，<code>b.js</code>没有更新，说明<code>b.js</code>没有被构建</li>
</ol>
<h3 id="gulp-if"><a href="#gulp-if" class="headerlink" title="gulp-if"></a>gulp-if</h3><blockquote>
<p>插件名称：gulp-if</p>
<p>作用：条件过滤插件</p>
</blockquote>
<ol>
<li>基本使用</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulpif = <span class="built_in">require</span>(<span class="string">&quot;gulp-if&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">gulpif</span>(<span class="literal">true</span>,plugins.<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">      <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">    &#125;)))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的<code>htmlmin</code>加载判断逻辑根据第一个参数的布尔值情况处理，如果为<code>true</code>了则加载后面的插件，否则直接跳过这个插件执行</li>
<li>如果传入三个参数的可以理解为<code>if-else</code>的逻辑，或者可以理解为三元运算符的逻辑</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">var</span> source =  <span class="title function_">src</span>(<span class="string">&quot;./src/js/a.js&quot;</span>)</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">gulpif</span>(<span class="literal">true</span>,<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">      <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">    &#125;),<span class="title function_">inject</span>(source)))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中一共有三个参数，第一个参数表示布尔值结果，如果结果为<code>true</code>则执行<code>htmlmin</code>这个插件，否则执行<code>inject</code>插件</li>
<li>第一个参数可以是函数，<code>gulpif</code>插件会自动执行这个函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">boo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;html&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">var</span> source =  <span class="title function_">src</span>(<span class="string">&quot;./src/js/a.js&quot;</span>)</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">gulpif</span>(boo,plugins.<span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">      <span class="attr">collapseWhitespace</span>: <span class="literal">true</span></span><br><span class="line">    &#125;),plugins.<span class="title function_">inject</span>(source)))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="gulp-size"><a href="#gulp-size" class="headerlink" title="gulp-size"></a>gulp-size</h3><blockquote>
<p>插件名称：gulp-size</p>
<p>作用：输入文件的大小</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> size = <span class="built_in">require</span>(<span class="string">&quot;gulp-size&quot;</span>);</span><br><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.js&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">size</span>(&#123;</span><br><span class="line">      <span class="attr">title</span>:<span class="string">&quot;输出的文件&quot;</span></span><br><span class="line">    &#125;))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li><code>gulp-size</code>可以多次输出</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.js&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(plugins.<span class="title function_">size</span>(&#123;</span><br><span class="line">      <span class="attr">title</span>:<span class="string">&quot;压缩前&quot;</span></span><br><span class="line">    &#125;))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./dist&quot;</span>))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">uglify</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">size</span>(&#123;</span><br><span class="line">      <span class="attr">title</span>:<span class="string">&quot;压缩后&quot;</span></span><br><span class="line">    &#125;))</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./build&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>相关的详细配置参考：<a target="_blank" rel="noopener" href="https://www.bbsmax.com/A/kPzOeN7o5x/">https://www.bbsmax.com/A/kPzOeN7o5x/</a></li>
</ol>
<h3 id="gulp-jshint"><a href="#gulp-jshint" class="headerlink" title="gulp-jshint"></a>gulp-jshint</h3><blockquote>
<p>插件名称：gulp-jshint</p>
<p>作用：js语法检查</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">task</span>(<span class="string">&quot;js&quot;</span>, <span class="function">(<span class="params">done</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">src</span>(<span class="string">&quot;./src/**/*.js&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">jshint</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(jshint.<span class="title function_">reporter</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">dest</span>(<span class="string">&quot;./build&quot;</span>))</span><br><span class="line">  <span class="title function_">done</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ol>
<li>配置选项</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;strict&quot;</span>:<span class="literal">true</span>,</span><br><span class="line"><span class="string">&quot;asi&quot;</span>: <span class="literal">true</span>, <span class="comment">//允许省略分号（写上这条，规避检查出很多警告  可以去掉）</span></span><br><span class="line"><span class="string">&quot;bitwise&quot;</span>: <span class="literal">true</span>, <span class="comment">//禁止使用位运算符，比如经常把&amp;&amp;写错&amp; 规避此错误</span></span><br><span class="line"><span class="string">&quot;noarg&quot;</span>: <span class="literal">true</span>, <span class="comment">//禁止使用.caller 和 .callee (ECMS5已经禁用了此 可以去掉)</span></span><br><span class="line"><span class="string">&quot;eqeqeq&quot;</span>: <span class="literal">true</span>, <span class="comment">//禁止使用== 和 ！=  强制使用=== 和 ！==</span></span><br><span class="line"><span class="string">&quot;undef&quot;</span>: <span class="literal">true</span>, <span class="comment">//禁止使用不在全局变量列表中的未定义变量</span></span><br><span class="line"><span class="string">&quot;curly&quot;</span>: <span class="literal">true</span>, <span class="comment">//循环或者条件语句必须使用花括号包住</span></span><br><span class="line"><span class="string">&quot;devel&quot;</span>: <span class="literal">true</span>, <span class="comment">//定义用于调试的全局变量：console,alert</span></span><br><span class="line"><span class="string">&quot;jquery&quot;</span>: <span class="literal">true</span>, <span class="comment">//定义全局暴露的jQuery库 （可以去掉）</span></span><br><span class="line"><span class="string">&quot;browser&quot;</span>: <span class="literal">true</span>, <span class="comment">//暴露浏览器属性的全局变量 如window document</span></span><br><span class="line"><span class="string">&quot;evil&quot;</span>: <span class="literal">true</span>, <span class="comment">//禁止使用eval （可以去掉）</span></span><br><span class="line"><span class="string">&quot;quotemark&quot;</span>:<span class="literal">true</span> (商榷)</span><br><span class="line"><span class="string">&quot;globals&quot;</span>: &#123;<span class="string">&quot;$&quot;</span>:<span class="literal">true</span>,<span class="string">&quot;require&quot;</span>:<span class="literal">true</span>,<span class="string">&quot;FastClick&quot;</span>:<span class="literal">true</span>,<span class="string">&quot;Swiper&quot;</span>&#125;,</span><br></pre></td></tr></table></figure>
<h1 id="grunt"><a href="#grunt" class="headerlink" title="grunt"></a>grunt</h1><ol>
<li>地址：<a target="_blank" rel="noopener" href="https://www.gruntjs.net/">https://www.gruntjs.net/</a></li>
<li><code>grunt</code>是<code>JavaScript</code>代码的构建工具，<code>grunt</code>要比<code>gulp</code>诞生更早一点，也是基于<code>node</code></li>
</ol>
<h2 id="入门使用"><a href="#入门使用" class="headerlink" title="入门使用"></a>入门使用</h2><ol>
<li>首先我们需要全局安装<code>grunt-cli</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install grunt-cli -g</span><br></pre></td></tr></table></figure>
<ol>
<li>然后在项目中安装grunt</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install grunt -D</span><br></pre></td></tr></table></figure>
<ol>
<li>创建入口文件<code>gruntfile.js</code></li>
<li>和<code>gulp</code>不同的是<code>grunt</code>在配置<code>gruntfile.js文</code>件的时候，最外层需要一个包装器</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// grunt的相关配置</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><code>gruntfile</code>文件一共有几个部分组成<ol>
<li>包装函数</li>
<li>项目与任务的配置</li>
<li>加载<code>grunt</code>插件和任务</li>
<li>自定义任务</li>
</ol>
</li>
<li>看一下官网提供的入门案例</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span>(<span class="params">grunt</span>) &#123;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 项目相关配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line"><span class="attr">pkg</span>: grunt.<span class="property">file</span>.<span class="title function_">readJSON</span>(<span class="string">&#x27;package.json&#x27;</span>),</span><br><span class="line"><span class="comment">// 就是一个插件</span></span><br><span class="line">    <span class="attr">uglify</span>: &#123;</span><br><span class="line">      <span class="attr">options</span>: &#123;</span><br><span class="line">        <span class="attr">banner</span>: <span class="string">&#x27;/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today(&quot;yyyy-mm-dd&quot;) %&gt; */\n&#x27;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">build</span>: &#123;</span><br><span class="line">        <span class="attr">src</span>: <span class="string">&#x27;src/&lt;%= pkg.name %&gt;.js&#x27;</span>,</span><br><span class="line">        <span class="attr">dest</span>: <span class="string">&#x27;build/&lt;%= pkg.name %&gt;.min.js&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 加载包含 &quot;uglify&quot; 任务的插件。</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&#x27;grunt-contrib-uglify&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 默认被执行的任务列表。</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&#x27;default&#x27;</span>, [<span class="string">&#x27;uglify&#x27;</span>]);</span><br><span class="line"></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>1.<code>grunt</code>通过<code>grunt</code>对象暴露所有的方法和属性，并将此对象赋值于module.exports函数，这些方法和属性都将传递到<code>gruntfile</code>中的<code>grunt</code>插件或者<code>task</code>任务中</p>
<ol>
<li>上面例子中<code>grunt.file.readJSON</code>(‘package.json’)方法会把存储在<code>package.json</code>中的<code>json</code>元数据引入到<code>grunt.initConfig</code>中<br>3.<code>&lt;%= %&gt;</code>表示模板字符串，由于<code>&lt;%= %&gt;</code>可以引入任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少重复工作</li>
</ol>
<h2 id="grunt的常用方法"><a href="#grunt的常用方法" class="headerlink" title="grunt的常用方法"></a>grunt的常用方法</h2><ol>
<li>grunt基础的项目框架</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 任务配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line"></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="comment">// 载入任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>()</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="grunt-initConfig"><a href="#grunt-initConfig" class="headerlink" title="grunt.initConfig"></a>grunt.initConfig</h3><ol>
<li>此方法是 <code>grunt.config.init</code> 方法的别名<code>（alias）</code></li>
<li>为当前项目初始化一个配置对象。其中传入的 <code>configObject</code> 参数可以用在后续的<code>task</code>中，可以通过 <code>grunt.config</code> 方法访问。几乎每个项目的 <code>Gruntfile</code> 都会调用此方法</li>
<li><code>grunt</code>的<code>task</code>配置都在<code>grunt.initConfig</code>中，此配置主要包括以任务名称（通常以引入进来的插件的名称）的属性命名和其他任意数据。一旦这些任意数据的属性和任务所需要的属性冲突的时候，任意数据命名的属性将被忽略</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 任务配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">concat</span>: &#123;</span><br><span class="line">      <span class="comment">// 这里是concat任务的配置信息</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">uglify</span>: &#123;</span><br><span class="line">      <span class="comment">// 这里是uglify任务的配置信息</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 任意数据，一般任意数据都已my_开头</span></span><br><span class="line">    <span class="attr">my_data</span>:<span class="string">&quot;dataJSON&quot;</span></span><br><span class="line">  &#125;);</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>当运行任务的时候，<code>grunt</code>会自动查找配置对象中的同名属性</li>
<li>我们执行第一个<code>grunt</code>任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 任务配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">concat</span>: &#123;</span><br><span class="line">      <span class="attr">options</span>: &#123;</span><br><span class="line">        <span class="attr">separator</span>: <span class="string">&#x27;;&#x27;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">src</span>: [<span class="string">&#x27;src/js/a.js&#x27;</span>, <span class="string">&#x27;src/js/b.js&#x27;</span>],</span><br><span class="line">        <span class="attr">dest</span>: <span class="string">&#x27;dist/built.js&#x27;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 任意数据，一般任意数据都已my_开头</span></span><br><span class="line">    <span class="attr">my_data</span>:<span class="string">&quot;dataJSON&quot;</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="comment">// 载入任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-concat&quot;</span>)</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;concatFile&quot;</span>,[<span class="string">&#x27;concat&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时执行命令</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grunt concatFile</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">concat</span>: &#123;</span><br><span class="line">      <span class="attr">options</span>: &#123;</span><br><span class="line">        <span class="attr">separator</span>: <span class="string">&#x27;;&#x27;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">src</span>: [<span class="string">&#x27;src/js/a.js&#x27;</span>, <span class="string">&#x27;src/js/b.js&#x27;</span>],</span><br><span class="line">        <span class="attr">dest</span>: <span class="string">&#x27;dist/built.js&#x27;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li><code>options</code>是这个任务的详细配置</li>
<li><code>dist</code>指的是当前这个任务入口和出口的命名，这个命名不是固定的，比如下面的<code>aaa</code>表达和<code>dist</code>是用一个含义，只是命名不同</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">concat</span>: &#123;</span><br><span class="line">  <span class="attr">options</span>: &#123;</span><br><span class="line">    <span class="attr">separator</span>: <span class="string">&#x27;;&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">aaa</span>: &#123;</span><br><span class="line">    <span class="attr">src</span>: [<span class="string">&#x27;src/js/a.js&#x27;</span>, <span class="string">&#x27;src/js/b.js&#x27;</span>],</span><br><span class="line">    <span class="attr">dest</span>: <span class="string">&#x27;dist/built.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>设置可以多个目标</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">concat</span>: &#123;</span><br><span class="line">  <span class="attr">options</span>: &#123;</span><br><span class="line">    <span class="attr">separator</span>: <span class="string">&#x27;;&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">dist</span>: &#123;</span><br><span class="line">    <span class="attr">src</span>: [<span class="string">&#x27;src/js/a.js&#x27;</span>, <span class="string">&#x27;src/js/b.js&#x27;</span>],</span><br><span class="line">    <span class="attr">dest</span>: <span class="string">&#x27;dist/built.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">aaa</span>: &#123;</span><br><span class="line">    <span class="attr">src</span>: [<span class="string">&#x27;src/js/a.js&#x27;</span>, <span class="string">&#x27;src/js/b.js&#x27;</span>],</span><br><span class="line">    <span class="attr">dest</span>: <span class="string">&#x27;build/built.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<ol>
<li>此时上面的<code>dist</code>和<code>aaa</code>都会执行，同时生成<code>dist</code>和<code>build</code>两个文件夹</li>
<li>相关的<code>src</code>和<code>dest</code>的文件合适有很多</li>
<li>简介格式</li>
<li>这种形式允许每个目标对应一个<code>src-dest</code>文件映射，通常情况下它用于只读任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">  <span class="attr">jshint</span>: &#123;</span><br><span class="line">    <span class="attr">foo</span>: &#123;</span><br><span class="line">      <span class="attr">src</span>: [<span class="string">&#x27;src/aa.js&#x27;</span>, <span class="string">&#x27;src/aaa.js&#x27;</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">concat</span>: &#123;</span><br><span class="line">    <span class="attr">bar</span>: &#123;</span><br><span class="line">      <span class="attr">src</span>: [<span class="string">&#x27;src/bb.js&#x27;</span>, <span class="string">&#x27;src/bbb.js&#x27;</span>],</span><br><span class="line">      <span class="attr">dest</span>: <span class="string">&#x27;dest/b.js&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li>文件对象格式</li>
<li>这种形式支持每个目标对应多个<code>src-dest</code>形式的文件映射，属性名就是目标文件，源文件就是它的值(源文件列表则使用数组格式声明)。可以使用这种方式指定数个<code>src-dest</code>文件映射， 但是不能够给每个映射指定附加的属性。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">  <span class="attr">concat</span>: &#123;</span><br><span class="line">    <span class="attr">foo</span>: &#123;</span><br><span class="line">      <span class="attr">files</span>: &#123;</span><br><span class="line">        <span class="string">&#x27;dest/a.js&#x27;</span>: [<span class="string">&#x27;src/aa.js&#x27;</span>, <span class="string">&#x27;src/aaa.js&#x27;</span>],</span><br><span class="line">        <span class="string">&#x27;dest/a1.js&#x27;</span>: [<span class="string">&#x27;src/aa1.js&#x27;</span>, <span class="string">&#x27;src/aaa1.js&#x27;</span>],</span><br><span class="line">      &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li><code>&#39;dest/a.js&#39;</code>表示输出文件的地址</li>
<li><code>[&#39;src/aa.js&#39;, &#39;src/aaa.js&#39;]</code>表示读取源文件的地址</li>
</ol>
<ol>
<li>数组格式</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">  <span class="attr">concat</span>: &#123;</span><br><span class="line">    <span class="attr">foo</span>: &#123;</span><br><span class="line">      <span class="attr">files</span>: [</span><br><span class="line">        &#123;<span class="attr">src</span>: [<span class="string">&#x27;src/aa.js&#x27;</span>, <span class="string">&#x27;src/aaa.js&#x27;</span>], <span class="attr">dest</span>: <span class="string">&#x27;dest/a.js&#x27;</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">src</span>: [<span class="string">&#x27;src/aa1.js&#x27;</span>, <span class="string">&#x27;src/aaa1.js&#x27;</span>], <span class="attr">dest</span>: <span class="string">&#x27;dest/a1.js&#x27;</span>&#125;,</span><br><span class="line">      ],</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol>
<li><code>src</code>表示该目标的入口文件</li>
<li><code>dest</code>表示该目标的出口文件</li>
</ol>
<h3 id="文件路径的匹配"><a href="#文件路径的匹配" class="headerlink" title="文件路径的匹配"></a>文件路径的匹配</h3><ol>
<li>匹配任意数量的字符，但不匹配 <code>/</code></li>
<li><code>?</code> 匹配单个字符，但不匹配 <code>/</code></li>
<li><code>**</code> 匹配任意数量的字符，包括 <code>/</code>，只要它是路径中唯一的一部分</li>
<li><code>&#123;&#125;</code> 允许使用一个逗号分割的<code>“或”</code>表达式列表</li>
<li><code>!</code> 在模式的开头用于排除一个匹配模式所匹配的任何文件</li>
</ol>
<ol>
<li>文件的匹配模式</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 指定单个文件：</span></span><br><span class="line">&#123;<span class="attr">src</span>: <span class="string">&#x27;foo/this.js&#x27;</span>, <span class="attr">dest</span>: ...&#125;</span><br><span class="line"><span class="comment">// 指定一个文件数组：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/this.js&#x27;</span>, <span class="string">&#x27;foo/that.js&#x27;</span>, <span class="string">&#x27;foo/the-other.js&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br><span class="line"><span class="comment">// 使用一个匹配模式：</span></span><br><span class="line">&#123;<span class="attr">src</span>: <span class="string">&#x27;foo/th*.js&#x27;</span>, <span class="attr">dest</span>: ...&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 一个独立的node-glob模式：</span></span><br><span class="line">&#123;<span class="attr">src</span>: <span class="string">&#x27;foo/&#123;a,b&#125;*.js&#x27;</span>, <span class="attr">dest</span>: ...&#125;</span><br><span class="line"><span class="comment">// 也可以这样编写：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/a*.js&#x27;</span>, <span class="string">&#x27;foo/b*.js&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// foo目录中所有的.js文件，按字母顺序排序：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/*.js&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br><span class="line"><span class="comment">// 首先是bar.js，接着是剩下的.js文件，并按字母顺序排序：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/bar.js&#x27;</span>, <span class="string">&#x27;foo/*.js&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 除bar.js之外的所有的.js文件，按字母顺序排序：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/*.js&#x27;</span>, <span class="string">&#x27;!foo/bar.js&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br><span class="line"><span class="comment">// 按字母顺序排序的所有.js文件，但是bar.js在最后。</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/*.js&#x27;</span>, <span class="string">&#x27;!foo/bar.js&#x27;</span>, <span class="string">&#x27;foo/bar.js&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 模板也可以用于文件路径或者匹配模式中：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;src/&lt;%= basename %&gt;.js&#x27;</span>], <span class="attr">dest</span>: <span class="string">&#x27;build/&lt;%= basename %&gt;.min.js&#x27;</span>&#125;</span><br><span class="line"><span class="comment">// 它们也可以引用在配置中定义的其他文件列表：</span></span><br><span class="line">&#123;<span class="attr">src</span>: [<span class="string">&#x27;foo/*.js&#x27;</span>, <span class="string">&#x27;&lt;%= jshint.all.src %&gt;&#x27;</span>], <span class="attr">dest</span>: ...&#125;</span><br></pre></td></tr></table></figure>
<h3 id="grunt-loadNpmTasks"><a href="#grunt-loadNpmTasks" class="headerlink" title="grunt.loadNpmTasks"></a>grunt.loadNpmTasks</h3><ol>
<li>此方法是 <code>grunt.task.loadNpmTasks</code> 方法的别名</li>
<li>从指定的 <code>Grunt</code> 插件中加载任务。此插件必须通过<code>npm</code>安装到本地，并且是参照 <code>Gruntfile</code> 文件的相对路径</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="property">task</span>.<span class="title function_">loadNpmTasks</span>(插件命名)</span><br></pre></td></tr></table></figure>
<ol>
<li>上面的方法的别名：<code>grunt.loadNpmTasks</code></li>
</ol>
<h3 id="grunt-registerTask"><a href="#grunt-registerTask" class="headerlink" title="grunt.registerTask"></a>grunt.registerTask</h3><ol>
<li>此方法是 <code>grunt.task.registerTask</code> 方法的别名</li>
<li>该方法表示注册 “别名任务” 或 任务函数</li>
<li>别名任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="property">task</span>.<span class="title function_">registerTask</span>(任务命名,[任务列表])</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 任务配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">concat</span>: &#123;</span><br><span class="line">      ….</span><br><span class="line">&#125;</span><br><span class="line"> &#125;);</span><br><span class="line">  <span class="comment">// 载入任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-concat&quot;</span>)</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;concatFile&quot;</span>,[<span class="string">&#x27;concat&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时我们要执行命令<code>gurnt concatFile</code></li>
<li>如果默认不希望带后面的任务名称，该任务为<code>default</code></li>
<li>任务函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">a, b, c</span>) =&gt;</span> &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(a,b,c)</span><br><span class="line">   &#125;)</span><br><span class="line">  <span class="comment">// 载入任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-concat&quot;</span>)</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;concatFile&quot;</span>,[ task1])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>我们可以通过别名任务来执行和这个任务函数，并且传入参数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">(<span class="params">a, b, c</span>) =&gt;</span> &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(a,b,c)</span><br><span class="line">   &#125;)</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;concatFile&quot;</span>,[<span class="string">&#x27;task1:100:200:300&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>多个参数就是使用:来分割的</li>
<li><code>registerTask</code>在执行任务序列的时候是同步执行的</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="comment">// 合并文件</span></span><br><span class="line">    <span class="attr">concat</span>: &#123;</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">src</span>: [<span class="string">&#x27;src/js/a.js&#x27;</span>, <span class="string">&#x27;src/js/b.js&#x27;</span>],</span><br><span class="line">        <span class="attr">dest</span>: <span class="string">&#x27;dist/built.js&#x27;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">uglify</span>: &#123;</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">         <span class="attr">files</span>: &#123;</span><br><span class="line">          <span class="string">&#x27;dist/built.min.js&#x27;</span>: [<span class="string">&#x27;dist/built.js&#x27;</span>]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 载入任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-concat&quot;</span>)</span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-uglify&quot;</span>)</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;concat&#x27;</span>,<span class="string">&#x27;uglify&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中执行了两个任务，分别是合并文件，然后文件合并后再进行压缩，此时可以正常运行，如果将<code>uglify</code>和<code>concat</code>换个位置，会报错</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;uglify&#x27;</span>,<span class="string">&#x27;concat&#x27;</span>])</span><br></pre></td></tr></table></figure>
<ol>
<li>虽然<code>registerTask</code>是同步执行的，但是也可以设置异步任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="keyword">function</span> (<span class="params">a, b, c</span>) &#123;</span><br><span class="line">  <span class="comment">//注册当前的任务函数为异步任务</span></span><br><span class="line">  <span class="keyword">let</span> done = <span class="variable language_">this</span>.<span class="title function_">async</span>();</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;输出了异步任务&quot;</span>);</span><br><span class="line">    <span class="title function_">done</span>()</span><br><span class="line">  &#125;,<span class="number">3000</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册任务</span></span><br><span class="line">grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task1&#x27;</span>])</span><br></pre></td></tr></table></figure>
<ol>
<li>上面执行异步任务的依据就是<code>this.async</code>函数，表示注册当前的函数任务为异步的函数任务，后面必须用<code>done</code>来结束这个任务，异步任务必须要执行这个函数</li>
</ol>
<h3 id="grunt-registerMultiTask"><a href="#grunt-registerMultiTask" class="headerlink" title="grunt.registerMultiTask"></a>grunt.registerMultiTask</h3><ol>
<li>此方法是<code>grunt.task.registerMultiTask</code> 方法的别名</li>
<li>注册一个 “复合任务（<code>multi task</code>）”。<code>复合任务</code>是指在不指定目标（<code>target</code>）时，将依次执行其所包含的所有已命名的<code>子属性（sub-properties） (也就是 目标)</code> 。除了默认的属性和方法外，还可以通过<code>this</code>对象访问复合任务独有的属性。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">log</span>: &#123;</span><br><span class="line">      <span class="attr">foo</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>],</span><br><span class="line">      <span class="attr">bar</span>: <span class="string">&#x27;hello world&#x27;</span>,</span><br><span class="line">      <span class="attr">baz</span>: <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  grunt.<span class="property">task</span>.<span class="title function_">registerMultiTask</span>(<span class="string">&#x27;log&#x27;</span>, <span class="string">&#x27;Log stuff.&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    grunt.<span class="property">log</span>.<span class="title function_">writeln</span>(<span class="variable language_">this</span>.<span class="property">target</span> + <span class="string">&#x27;: &#x27;</span> + <span class="variable language_">this</span>.<span class="property">data</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>执行命令 grunt log</li>
</ol>
<h3 id="grunt-renameTask"><a href="#grunt-renameTask" class="headerlink" title="grunt.renameTask"></a>grunt.renameTask</h3><ol>
<li>此方法是 <code>grunt.task.renameTask</code> 方法的别名</li>
<li>重命名任务。覆盖某个任务的默认行为，并且希望保留原来的名字</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;任务1&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  grunt.<span class="title function_">renameTask</span>(<span class="string">&quot;task1&quot;</span>,<span class="string">&quot;task2&quot;</span>)</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task2&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时执行上面任务<code>task1</code>不能使用了，只能执行<code>task2</code></li>
</ol>
<h3 id="grunt-loadTasks"><a href="#grunt-loadTasks" class="headerlink" title="grunt.loadTasks"></a>grunt.loadTasks</h3><ol>
<li>此方法可以从本地<code>Grunt</code>插件加载任务相关的文件，只需指定包含”<code>tasks</code>“子目录的插件目录即可。<br>2.<code>grunt.task.loadTasks</code>(tasksPath)</li>
</ol>
<h3 id="grunt-warn"><a href="#grunt-warn" class="headerlink" title="grunt.warn"></a>grunt.warn</h3><ol>
<li>此方法是 <code>grunt.fail.warn</code> 方法的别名（<code>alias</code>）</li>
<li>显示一条警告信息然后立即退出<code>Grunt</code>。如果在命令行中指定了<code>--force</code> 选项，<code>Grunt</code>将继续执行后续任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">grunt.<span class="title function_">warn</span>(<span class="string">&quot;warn警告&quot;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;任务1&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task1&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>此时<code>grunt</code>会退出任务，不执行后面的代码，如果希望执行后面的代码，需要加<code>--force</code></li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grunt --force</span><br></pre></td></tr></table></figure>
<ol>
<li><code>grunt.fatal</code></li>
<li>显示一条警告信息然后立即退出<code>Grunt</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task2&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    grunt.<span class="title function_">fatal</span>(<span class="string">&quot;danger错误&quot;</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;任务1&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task2&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="grunt-event"><a href="#grunt-event" class="headerlink" title="grunt.event"></a>grunt.event</h3><ol>
<li>该方法为<code>grunt</code>添加事件监听，注意该事件监听和<code>js</code>的事件监听不同，仅仅支持自定义的事件监听</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>, <span class="function">(<span class="params">n</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务1函数&quot;</span>,n);</span><br><span class="line">  &#125;)</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event1&quot;</span>)</span><br><span class="line">  &#125;);</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task1&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>上面代码中使用了<code>grunt.event.on</code>定义了一个事件<code>event1</code>，此时如果需要调用这个事件，可以使用<code>grunt.event.emit</code>来执行这个事件，内部的参数就是<code>on</code>定义的事件名称</li>
<li>还可以传入参数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event1&quot;</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>一个方法可以同时注入多个事件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">boo1</span>(<span class="params">n</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务1函数&quot;</span>,n);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">boo2</span>(<span class="params">n</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务2函数&quot;</span>,n);</span><br><span class="line">&#125;</span><br><span class="line">grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>,boo1)</span><br><span class="line">grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>, boo2)</span><br><span class="line">grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event1&quot;</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以定义只执行一次的事件</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">grunt.<span class="property">event</span>.<span class="title function_">once</span>(event, listener)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 定义只执行一次函数</span></span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">once</span>(<span class="string">&quot;event2&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务2函数&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event2&quot;</span>)</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event2&quot;</span>)</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event2&quot;</span>)</span><br><span class="line">  &#125;);</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task1&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以定义最多执行的次数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义了三次</span></span><br><span class="line">grunt.<span class="property">event</span>.<span class="title function_">many</span>(<span class="string">&quot;event3&quot;</span>,<span class="number">3</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务2函数&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;task1&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 执行了四次</span></span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event3&quot;</span>)</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event3&quot;</span>)</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event3&quot;</span>)</span><br><span class="line">    grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event3&quot;</span>)</span><br><span class="line">  &#125;);</span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&#x27;task1&#x27;</span>])</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以移除监听器</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">boo1</span>(<span class="params">n</span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务1函数&quot;</span>,n);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">boo2</span>(<span class="params">n</span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务2函数&quot;</span>,n);</span><br><span class="line">  &#125;</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>,boo1)</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>, boo2)</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">off</span>(<span class="string">&quot;event1&quot;</span>, boo1)</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event1&quot;</span>,<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol>
<li>还可以移除所有</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">boo1</span>(<span class="params">n</span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务1函数&quot;</span>,n);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">boo2</span>(<span class="params">n</span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行了任务2函数&quot;</span>,n);</span><br><span class="line">  &#125;</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>,boo1)</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">on</span>(<span class="string">&quot;event1&quot;</span>, boo2)</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">removeAllListeners</span>()</span><br><span class="line">  grunt.<span class="property">event</span>.<span class="title function_">emit</span>(<span class="string">&quot;event1&quot;</span>,<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>​</p>
<h2 id="grunt的常用配置"><a href="#grunt的常用配置" class="headerlink" title="grunt的常用配置"></a>grunt的常用配置</h2><ol>
<li>我们学习配置主要是<code>grunt</code>的插件</li>
<li><a target="_blank" rel="noopener" href="https://www.gruntjs.net/plugins">https://www.gruntjs.net/plugins</a></li>
<li>需要注意的是<code>grunt</code>的插件如果是以<code>grunt-contrib-**</code>开头的或者插件前面有五角星的插件都是<code>grunt</code>团队自己开发的插件</li>
<li>下面的配置都是通过<code>cnpm install ** -D</code>命名来安装的，因为是开发依赖</li>
</ol>
<h3 id="htmlmin"><a href="#htmlmin" class="headerlink" title="htmlmin"></a>htmlmin</h3><blockquote>
<p>插件名称：grunt-contrib-htmlmin</p>
<p>作用：html代码压缩</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">htmlmin</span>: &#123;</span><br><span class="line">      <span class="attr">index</span>: &#123;</span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="attr">removeComments</span>: <span class="literal">true</span>, <span class="comment">// 移除注释</span></span><br><span class="line">          <span class="attr">collapseWhitespace</span>: <span class="literal">true</span> <span class="comment">// 空白折叠</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">files</span>: &#123;</span><br><span class="line">          <span class="string">&#x27;dist/index.html&#x27;</span>: <span class="string">&#x27;index.html&#x27;</span>, <span class="comment">// 属性是输出地址，属性值是引入地址</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">options</span>: &#123;</span><br><span class="line">          <span class="attr">removeComments</span>: <span class="literal">true</span>, <span class="comment">// 移除注释</span></span><br><span class="line">          <span class="attr">collapseWhitespace</span>: <span class="literal">true</span> <span class="comment">// 空白折叠</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">files</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">expand</span>: <span class="literal">true</span>, <span class="comment">//如果为true表示输入的为文件路径，而不是文件</span></span><br><span class="line">            <span class="attr">src</span>: [<span class="string">&#x27;src/**/*.html&#x27;</span>], <span class="comment">// 文件引入地址</span></span><br><span class="line">            <span class="attr">dest</span>: <span class="string">&#x27;dist&#x27;</span>  <span class="comment">// 输出地址</span></span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 加载任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-htmlmin&quot;</span>);</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;htmlmin&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="less"><a href="#less" class="headerlink" title="less"></a>less</h3><blockquote>
<p>插件名称：grunt-contrib-less</p>
<p>作用：css的预处理器</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="comment">// css的配置-less</span></span><br><span class="line">    <span class="attr">less</span>: &#123;</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">files</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">expand</span>: <span class="literal">true</span>, <span class="comment">//如果为true表示输入的为文件路径，而不是文件</span></span><br><span class="line">            <span class="attr">src</span>: [<span class="string">&#x27;src/style/**/*.less&#x27;</span>], <span class="comment">// 文件引入地址</span></span><br><span class="line">            <span class="attr">dest</span>: <span class="string">&#x27;dist&#x27;</span>,  <span class="comment">// 输出地址</span></span><br><span class="line">            <span class="attr">ext</span>: <span class="string">&#x27;.css&#x27;</span> <span class="comment">// 重命名拓展名</span></span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 加载任务</span></span><br><span class="line">  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-less&quot;</span>);  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;less&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="cssmin"><a href="#cssmin" class="headerlink" title="cssmin"></a>cssmin</h3><blockquote>
<p>插件名称：grunt-contrib-cssmin</p>
<p>作用：css的代码压缩</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="comment">// css的配置-css的压缩</span></span><br><span class="line">    <span class="attr">cssmin</span>: &#123;</span><br><span class="line">      <span class="attr">target</span>: &#123;</span><br><span class="line">        <span class="attr">files</span>: [&#123;</span><br><span class="line">          <span class="attr">expand</span>: <span class="literal">true</span>, <span class="comment">//如果为true表示输入的为文件路径，而不是文件</span></span><br><span class="line">          <span class="attr">cwd</span>: <span class="string">&#x27;dist/src/style&#x27;</span>, <span class="comment">//强制文件的引用路径</span></span><br><span class="line">          <span class="attr">src</span>: [<span class="string">&#x27;*.css&#x27;</span>], <span class="comment">// 匹配cwd对应的目录下面的css文件</span></span><br><span class="line">          <span class="attr">dest</span>: <span class="string">&#x27;build/src/style&#x27;</span>,<span class="comment">// 输出地址</span></span><br><span class="line">          <span class="attr">ext</span>: <span class="string">&#x27;.css&#x27;</span> <span class="comment">// // 重命名拓展名</span></span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)  grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-cssmin&quot;</span>);</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;cssmin&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="imagemin"><a href="#imagemin" class="headerlink" title="imagemin"></a>imagemin</h3><blockquote>
<p>插件名称：grunt-contrib-imagemin</p>
<p>作用：图片的压缩</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="comment">// css的配置-css的压缩</span></span><br><span class="line">    <span class="attr">imagemin</span>: &#123;</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">         <span class="attr">files</span>: [&#123;</span><br><span class="line">              <span class="attr">expand</span>: <span class="literal">true</span>,</span><br><span class="line">              <span class="attr">cwd</span>: <span class="string">&#x27;src/images&#x27;</span>,</span><br><span class="line">              <span class="attr">src</span>: [<span class="string">&#x27;**/*.&#123;png,jpg,gif&#125;&#x27;</span>],</span><br><span class="line">              <span class="attr">dest</span>: <span class="string">&#x27;dist/src/images&#x27;</span></span><br><span class="line">          &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&#125;)</span><br><span class="line"> grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-imagemin&quot;</span>);</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;imagemin&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="babel"><a href="#babel" class="headerlink" title="babel"></a>babel</h3><blockquote>
<p>需要安装三个依赖</p>
<p>grunt-babel @babel/core @babel/preset-env</p>
<p>作用是翻译es6语法为es5的</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">babel</span>: &#123;</span><br><span class="line">      <span class="attr">options</span>: &#123;</span><br><span class="line">        <span class="attr">presets</span>: [<span class="string">&#x27;@babel/preset-env&#x27;</span>]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">files</span>: [&#123;</span><br><span class="line">          <span class="attr">expand</span>: <span class="literal">true</span>,</span><br><span class="line">          <span class="attr">cwd</span>: <span class="string">&#x27;src/js&#x27;</span>,</span><br><span class="line">          <span class="attr">src</span>: [<span class="string">&#x27;*.js&#x27;</span>],</span><br><span class="line">          <span class="attr">dest</span>: <span class="string">&#x27;dist/src/js&#x27;</span></span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"> grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-babel&quot;</span>);</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;babel&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="concat"><a href="#concat" class="headerlink" title="concat"></a>concat</h3><blockquote>
<p>插件名称：grunt-contrib-concat</p>
<p>作用：js文件的合并</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">concat</span>: &#123;</span><br><span class="line">      <span class="attr">dist</span>: &#123;</span><br><span class="line">        <span class="attr">src</span>: [<span class="string">&#x27;src/js/**/*.js&#x27;</span>],</span><br><span class="line">        <span class="attr">dest</span>: <span class="string">&#x27;src/js/index.js&#x27;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"> grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-concat &quot;</span>);</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;concat&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="uglify"><a href="#uglify" class="headerlink" title="uglify"></a>uglify</h3><blockquote>
<p>插件名称：grunt-contrib-uglify</p>
<p>作用：js文件的压缩</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">function</span> (<span class="params">grunt</span>) &#123;</span><br><span class="line">  <span class="comment">// 初始化配置</span></span><br><span class="line">  grunt.<span class="title function_">initConfig</span>(&#123;</span><br><span class="line">    <span class="attr">uglify</span>: &#123;</span><br><span class="line">      <span class="attr">build</span>: &#123;</span><br><span class="line">        <span class="attr">src</span>: [<span class="string">&#x27;dist/src/js/index.js&#x27;</span>],</span><br><span class="line">        <span class="attr">dest</span>: <span class="string">&#x27;build/src/js/index.js&#x27;</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"> grunt.<span class="title function_">loadNpmTasks</span>(<span class="string">&quot;grunt-contrib-uglify &quot;</span>);</span><br><span class="line">  <span class="comment">// 注册任务</span></span><br><span class="line">  grunt.<span class="title function_">registerTask</span>(<span class="string">&quot;default&quot;</span>,[<span class="string">&quot;uglify&quot;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">晚夜微雨问海棠</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/posts/7704b301.html">http://example.com/posts/7704b301.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">晚夜微雨问海棠のBlog</a>！</span></div></div><div class="tag_share"><div class="post_share"><div class="social-share" data-image="https://s1.ax1x.com/2022/12/16/z7g88x.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/954c8db1.html" title="Google_V8原理"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/06/14/pCn45LT.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-06-14</div><div class="title">Google_V8原理</div></div></a></div><div><a href="/posts/f418d067.html" title="H5基础"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNllfe.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-06</div><div class="title">H5基础</div></div></a></div><div><a href="/posts/3da79d5b.html" title="JavaScript入门"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/12/08/z2ar8O.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-21</div><div class="title">JavaScript入门</div></div></a></div><div><a href="/posts/f818a4a.html" title="JavaScript面向对象"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/06/xXrY34.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-06</div><div class="title">JavaScript面向对象</div></div></a></div><div><a href="/posts/50839dad.html" title="ECMAScript基础"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/09/zS8LRA.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-09</div><div class="title">ECMAScript基础</div></div></a></div><div><a href="/posts/3a5743c3.html" title="Node全栈"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/12/03/zrV6Q1.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-03</div><div class="title">Node全栈</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Webpack%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">Webpack基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#AMD-%E8%A7%84%E8%8C%83"><span class="toc-number">1.1.</span> <span class="toc-text">AMD 规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%A0%E7%BB%9FHTML%E6%96%87%E4%BB%B6%E7%9A%84%E5%BC%95%E5%85%A5%E9%97%AE%E9%A2%98"><span class="toc-number">1.1.1.</span> <span class="toc-text">传统HTML文件的引入问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#AMD%E8%A7%84%E8%8C%83-require-js"><span class="toc-number">1.1.2.</span> <span class="toc-text">AMD规范-require.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#require-js%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.1.3.</span> <span class="toc-text">require.js的基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%AB%E5%90%8D%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.1.4.</span> <span class="toc-text">别名的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E6%9A%B4%E9%9C%B2%E5%8F%A3"><span class="toc-number">1.1.5.</span> <span class="toc-text">设置暴露口</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CMD%E8%A7%84%E8%8C%83"><span class="toc-number">1.2.</span> <span class="toc-text">CMD规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CMD%E5%92%8CAMD%E8%A7%84%E8%8C%83%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.2.2.</span> <span class="toc-text">CMD和AMD规范的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6-module%E8%AF%AD%E6%B3%95"><span class="toc-number">1.3.</span> <span class="toc-text">ES6-module语法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A6%82%E8%BF%B0"><span class="toc-number">1.3.1.</span> <span class="toc-text">概述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-1"><span class="toc-number">1.3.2.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%AB%E5%90%8D"><span class="toc-number">1.3.3.</span> <span class="toc-text">别名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%80%BC%E7%9A%84%E4%BF%AE%E6%94%B9"><span class="toc-number">1.3.4.</span> <span class="toc-text">获取值的修改</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#module%E7%9A%84%E9%9D%99%E6%80%81%E5%8A%A0%E8%BD%BD"><span class="toc-number">1.3.5.</span> <span class="toc-text">module的静态加载</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#as%E6%95%B4%E5%90%88%E6%A8%A1%E5%9D%97"><span class="toc-number">1.3.6.</span> <span class="toc-text">* as整合模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#export-default%E9%BB%98%E8%AE%A4%E6%9A%B4%E9%9C%B2"><span class="toc-number">1.3.7.</span> <span class="toc-text">export default默认暴露</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%BC%E5%87%BA%E5%92%8C%E5%AF%BC%E5%85%A5%E7%9A%84%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95"><span class="toc-number">1.3.8.</span> <span class="toc-text">导出和导入的复合写法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Webpack%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.4.</span> <span class="toc-text">Webpack的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A6%82%E8%BF%B0-1"><span class="toc-number">1.4.1.</span> <span class="toc-text">概述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E7%9A%84%E4%BD%93%E9%AA%8C"><span class="toc-number">1.4.2.</span> <span class="toc-text">webpack的体验</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#production%E5%92%8Cdevelopment%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.4.3.</span> <span class="toc-text">production和development的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE"><span class="toc-number">1.4.4.</span> <span class="toc-text">基本配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.4.5.</span> <span class="toc-text">配置样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AEhtml%E6%96%87%E4%BB%B6"><span class="toc-number">1.4.6.</span> <span class="toc-text">配置html文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webpack%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="toc-number">1.5.</span> <span class="toc-text">webpack的核心概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E7%9A%84%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE"><span class="toc-number">1.6.</span> <span class="toc-text">CSS的常用配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%90%E5%8F%96css%E6%96%87%E4%BB%B6"><span class="toc-number">1.6.1.</span> <span class="toc-text">提取css文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8E%8B%E7%BC%A9css%E6%96%87%E4%BB%B6"><span class="toc-number">1.6.2.</span> <span class="toc-text">压缩css文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E6%96%87%E4%BB%B6%E7%9A%84%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE"><span class="toc-number">1.7.</span> <span class="toc-text">JS文件的常用配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ES6%E7%9A%84%E8%AF%AD%E6%B3%95%E5%85%BC%E5%AE%B9"><span class="toc-number">1.7.1.</span> <span class="toc-text">ES6的语法兼容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95%E6%A3%80%E6%9F%A5eslint"><span class="toc-number">1.7.2.</span> <span class="toc-text">语法检查eslint</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E6%96%87%E4%BB%B6%E5%92%8CHTML%E6%96%87%E4%BB%B6%E7%9A%84%E5%8E%8B%E7%BC%A9"><span class="toc-number">1.8.</span> <span class="toc-text">JS文件和HTML文件的压缩</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#JS%E6%96%87%E4%BB%B6%E7%9A%84%E5%8E%8B%E7%BC%A9"><span class="toc-number">1.8.1.</span> <span class="toc-text">JS文件的压缩</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTML%E6%96%87%E4%BB%B6%E7%9A%84%E5%8E%8B%E7%BC%A9"><span class="toc-number">1.8.2.</span> <span class="toc-text">HTML文件的压缩</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%89%93%E5%8C%85%E5%9B%BE%E7%89%87%E8%B5%84%E6%BA%90"><span class="toc-number">1.9.</span> <span class="toc-text">配置打包图片资源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E9%85%8D%E7%BD%AECSS%E8%B5%84%E6%BA%90"><span class="toc-number">1.9.1.</span> <span class="toc-text">打包配置CSS资源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E9%85%8D%E7%BD%AEHTML%E5%9B%BE%E7%89%87%E8%B5%84%E6%BA%90"><span class="toc-number">1.9.2.</span> <span class="toc-text">打包配置HTML图片资源</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BD%AE%E6%89%93%E5%8C%85%E5%85%B6%E4%BB%96%E8%B5%84%E6%BA%90"><span class="toc-number">1.10.</span> <span class="toc-text">置打包其他资源</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E6%97%B6%E7%BC%96%E8%AF%91"><span class="toc-number">1.11.</span> <span class="toc-text">实时编译</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#devServer%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.12.</span> <span class="toc-text">devServer的配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E4%B9%A0%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.13.</span> <span class="toc-text">复习开发环境的配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.14.</span> <span class="toc-text">生产环境的配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webpack%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.</span> <span class="toc-text">webpack的详细配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#entry%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.1.</span> <span class="toc-text">entry的详细配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#output%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.2.</span> <span class="toc-text">output的详细配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#filename%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.2.1.</span> <span class="toc-text">filename的配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#path%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.2.2.</span> <span class="toc-text">path的配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#publicPath%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.2.3.</span> <span class="toc-text">publicPath的配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#chunkFilename%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.2.4.</span> <span class="toc-text">chunkFilename的配置</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#module%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.3.</span> <span class="toc-text">module的详细配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#resolve%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.4.</span> <span class="toc-text">resolve的详细配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#alias%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.4.1.</span> <span class="toc-text">alias的配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#extensions%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.4.2.</span> <span class="toc-text">extensions的配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#modules%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.4.3.</span> <span class="toc-text">modules的配置</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#devServer%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.5.</span> <span class="toc-text">devServer的详细配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#host%E5%9F%9F%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.5.1.</span> <span class="toc-text">host域名的配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#compress%E5%90%AF%E5%8A%A8%E5%8E%8B%E7%BC%A9"><span class="toc-number">1.15.5.2.</span> <span class="toc-text">compress启动压缩</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#watchContentBase%E7%9B%91%E5%90%AC%E7%9B%AE%E5%BD%95"><span class="toc-number">1.15.5.3.</span> <span class="toc-text">watchContentBase监听目录</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#watchOptions-%E7%9B%91%E5%90%AC%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.5.4.</span> <span class="toc-text">watchOptions 监听配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#clientLogLevel-%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%97%A5%E5%BF%97"><span class="toc-number">1.15.5.5.</span> <span class="toc-text">clientLogLevel 客户端日志</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#stats%E7%BC%96%E8%BE%91%E5%99%A8%E4%BF%A1%E6%81%AF%E7%AE%A1%E7%90%86"><span class="toc-number">1.15.5.6.</span> <span class="toc-text">stats编辑器信息管理</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#quiet%E7%9A%84%E9%9D%99%E8%B0%A7%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.6.</span> <span class="toc-text">quiet的静谧状态</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#proxy%E7%9A%84%E4%BB%A3%E7%90%86%EF%BC%88%E2%98%85%EF%BC%89"><span class="toc-number">1.15.6.1.</span> <span class="toc-text">proxy的代理（★）</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#devtool%E7%9A%84%E8%AF%A6%E7%BB%86%E9%85%8D%E7%BD%AE"><span class="toc-number">1.15.7.</span> <span class="toc-text">devtool的详细配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#none%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.7.1.</span> <span class="toc-text">none的状态</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#eval%E7%9A%84%E7%8A%B6%E6%80%81%EF%BC%88%E9%BB%98%E8%AE%A4%E7%8A%B6%E6%80%81%EF%BC%89"><span class="toc-number">1.15.7.2.</span> <span class="toc-text">eval的状态（默认状态）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#source-map%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.7.3.</span> <span class="toc-text">source-map的状态</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#hidden-source-map%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.7.4.</span> <span class="toc-text">hidden-source-map的状态</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#inline-source-map%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.8.</span> <span class="toc-text">inline-source-map的状态</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#eval-source-map%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.8.1.</span> <span class="toc-text">eval-source-map的状态</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#cheap-source-map-%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.8.2.</span> <span class="toc-text">cheap-source-map 的状态</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#cheap-module-source-map-%E7%9A%84%E7%8A%B6%E6%80%81"><span class="toc-number">1.15.8.3.</span> <span class="toc-text">cheap-module-source-map 的状态</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-number">1.16.</span> <span class="toc-text">性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#HMR%E7%83%AD%E6%9B%BF%E6%8D%A2"><span class="toc-number">1.16.1.</span> <span class="toc-text">HMR热替换</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#css%E6%96%87%E4%BB%B6%E7%9A%84%E7%83%AD%E6%9B%B4%E6%96%B0"><span class="toc-number">1.16.1.1.</span> <span class="toc-text">css文件的热更新</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#js%E6%96%87%E4%BB%B6%E7%9A%84%E7%83%AD%E6%9B%BF%E6%8D%A2"><span class="toc-number">1.16.1.2.</span> <span class="toc-text">js文件的热替换</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-number">1.16.2.</span> <span class="toc-text">缓存</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#splitChunks-%E6%A8%A1%E5%9D%97%E5%88%86%E5%89%B2"><span class="toc-number">1.16.3.</span> <span class="toc-text">splitChunks-模块分割</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dll%E6%89%93%E5%8C%85%E4%BC%98%E5%8C%96"><span class="toc-number">1.16.4.</span> <span class="toc-text">dll打包优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%87%92%E5%8A%A0%E8%BD%BD%E5%92%8C%E9%A2%84%E5%8A%A0%E8%BD%BD"><span class="toc-number">1.16.5.</span> <span class="toc-text">懒加载和预加载</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#tree-shaking"><span class="toc-number">1.16.6.</span> <span class="toc-text">tree shaking</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E6%8F%92%E4%BB%B6"><span class="toc-number">1.17.</span> <span class="toc-text">内置插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#DefinePlugin-%E8%AE%BE%E7%BD%AE%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="toc-number">1.17.1.</span> <span class="toc-text">DefinePlugin 设置全局变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ProvidePlugin-%E8%AE%BE%E7%BD%AE%E5%85%A8%E5%B1%80%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97"><span class="toc-number">1.17.2.</span> <span class="toc-text">ProvidePlugin 设置全局加载模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BannerPlugin-chunk%E6%B3%A8%E9%87%8A"><span class="toc-number">1.17.3.</span> <span class="toc-text">BannerPlugin chunk注释</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-Less"><span class="toc-number">2.</span> <span class="toc-text">CSS预处理器-Less</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">2.1.</span> <span class="toc-text">变量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B7%E5%90%88"><span class="toc-number">2.2.</span> <span class="toc-text">混合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97"><span class="toc-number">2.3.</span> <span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%AE%97"><span class="toc-number">2.4.</span> <span class="toc-text">运算</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BD%AC%E4%B9%89"><span class="toc-number">2.5.</span> <span class="toc-text">转义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extend%E6%89%A9%E5%B1%95"><span class="toc-number">2.6.</span> <span class="toc-text">extend扩展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%BC%E5%85%A5"><span class="toc-number">2.7.</span> <span class="toc-text">导入</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-2"><span class="toc-number">2.7.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%BC%E5%85%A5%E7%9A%84%E9%80%89%E9%A1%B9"><span class="toc-number">2.7.2.</span> <span class="toc-text">导入的选项</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Guard%E5%AE%88%E5%8D%AB"><span class="toc-number">2.8.</span> <span class="toc-text">Guard守卫</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%88%E5%B9%B6"><span class="toc-number">2.9.</span> <span class="toc-text">合并</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E5%87%BD%E6%95%B0"><span class="toc-number">2.10.</span> <span class="toc-text">内置函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E6%95%B0%E5%AD%A6%E5%87%BD%E6%95%B0"><span class="toc-number">2.10.1.</span> <span class="toc-text">内置数学函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E5%87%BD%E6%95%B0"><span class="toc-number">2.10.2.</span> <span class="toc-text">列表函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E5%87%BD%E6%95%B0"><span class="toc-number">2.10.3.</span> <span class="toc-text">类型函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%87%BD%E6%95%B0"><span class="toc-number">2.10.4.</span> <span class="toc-text">其他函数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-Sass"><span class="toc-number">3.</span> <span class="toc-text">CSS预处理器-Sass</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Sass%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8Cwebpack%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">3.1.</span> <span class="toc-text">Sass的介绍和webpack的配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F-1"><span class="toc-number">3.2.</span> <span class="toc-text">变量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.3.</span> <span class="toc-text">数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B7%E5%90%88-1"><span class="toc-number">3.4.</span> <span class="toc-text">混合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E7%9A%84%E5%8A%9F%E8%83%BD%E6%8B%93%E5%B1%95"><span class="toc-number">3.5.</span> <span class="toc-text">CSS的功能拓展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extend%E6%89%A9%E5%B1%95-1"><span class="toc-number">3.6.</span> <span class="toc-text">extend扩展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sass%E5%B0%8F%E6%8C%87%E4%BB%A4"><span class="toc-number">3.7.</span> <span class="toc-text">sass小指令</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#at-root"><span class="toc-number">3.7.1.</span> <span class="toc-text">@at-root</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#debug"><span class="toc-number">3.7.2.</span> <span class="toc-text">@debug</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#warn"><span class="toc-number">3.7.3.</span> <span class="toc-text">@warn</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#error"><span class="toc-number">3.7.4.</span> <span class="toc-text">@error</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Sass%E7%9A%84%E8%BF%90%E7%AE%97"><span class="toc-number">3.8.</span> <span class="toc-text">Sass的运算</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E8%BF%90%E7%AE%97"><span class="toc-number">3.8.1.</span> <span class="toc-text">数学运算</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97"><span class="toc-number">3.8.2.</span> <span class="toc-text">关系运算</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6"><span class="toc-number">3.9.</span> <span class="toc-text">流程控制</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#if%EF%BC%88%EF%BC%89%E5%87%BD%E6%95%B0"><span class="toc-number">3.9.1.</span> <span class="toc-text">if（）函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#if%E6%8C%87%E4%BB%A4"><span class="toc-number">3.9.2.</span> <span class="toc-text">@if指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for%E6%8C%87%E4%BB%A4"><span class="toc-number">3.9.3.</span> <span class="toc-text">@for指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-3"><span class="toc-number">3.9.4.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#each%E6%8C%87%E4%BB%A4"><span class="toc-number">3.9.5.</span> <span class="toc-text">@each指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#while%E6%8C%87%E4%BB%A4"><span class="toc-number">3.9.6.</span> <span class="toc-text">@while指令</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%BC%E5%85%A5-1"><span class="toc-number">3.10.</span> <span class="toc-text">导入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E5%87%BD%E6%95%B0-1"><span class="toc-number">3.11.</span> <span class="toc-text">内置函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E5%87%BD%E6%95%B0"><span class="toc-number">3.11.1.</span> <span class="toc-text">字符函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E5%87%BD%E6%95%B0"><span class="toc-number">3.11.2.</span> <span class="toc-text">数学函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E5%87%BD%E6%95%B0-1"><span class="toc-number">3.11.3.</span> <span class="toc-text">列表函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%87%BD%E6%95%B0-1"><span class="toc-number">3.11.4.</span> <span class="toc-text">其他函数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-Stylus"><span class="toc-number">4.</span> <span class="toc-text">CSS预处理器-Stylus</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E5%92%8C%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">4.1.</span> <span class="toc-text">安装和基本使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F-2"><span class="toc-number">4.2.</span> <span class="toc-text">变量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97-1"><span class="toc-number">4.3.</span> <span class="toc-text">嵌套</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B7%E5%90%88-2"><span class="toc-number">4.4.</span> <span class="toc-text">混合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%AE%97-1"><span class="toc-number">4.5.</span> <span class="toc-text">运算</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E8%AE%A1%E7%AE%97"><span class="toc-number">4.5.1.</span> <span class="toc-text">普通计算</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97-2"><span class="toc-number">4.5.2.</span> <span class="toc-text">运算</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.5.3.</span> <span class="toc-text">关系运算符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0"><span class="toc-number">4.6.</span> <span class="toc-text">函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E8%AF%AD%E5%8F%A5"><span class="toc-number">4.7.</span> <span class="toc-text">条件语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5"><span class="toc-number">4.8.</span> <span class="toc-text">循环语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extend%E6%89%A9%E5%B1%95-2"><span class="toc-number">4.9.</span> <span class="toc-text">extend扩展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E7%BD%AE%E5%87%BD%E6%95%B0-2"><span class="toc-number">4.10.</span> <span class="toc-text">内置函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A3%80%E6%B5%8B%E9%A2%9C%E8%89%B2%E5%87%BD%E6%95%B0"><span class="toc-number">4.10.1.</span> <span class="toc-text">检测颜色函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E9%A2%9C%E8%89%B2%E5%87%BD%E6%95%B0"><span class="toc-number">4.10.2.</span> <span class="toc-text">设置颜色函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E5%87%BD%E6%95%B0-1"><span class="toc-number">4.10.3.</span> <span class="toc-text">数学函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E5%87%BD%E6%95%B0-2"><span class="toc-number">4.10.4.</span> <span class="toc-text">列表函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%87%BD%E6%95%B0-2"><span class="toc-number">4.10.5.</span> <span class="toc-text">其他函数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#gulp"><span class="toc-number">5.</span> <span class="toc-text">gulp</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">5.1.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E5%92%8C%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-1"><span class="toc-number">5.2.</span> <span class="toc-text">安装和基本使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-stream"><span class="toc-number">5.3.</span> <span class="toc-text">Node stream</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gulp%E7%9A%84%E5%86%85%E7%BD%AE%E5%87%BD%E6%95%B0"><span class="toc-number">5.4.</span> <span class="toc-text">gulp的内置函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-task"><span class="toc-number">5.4.1.</span> <span class="toc-text">gulp.task()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-series-%E5%92%8Cgulp-parallel"><span class="toc-number">5.4.2.</span> <span class="toc-text">gulp.series()和gulp.parallel()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-src"><span class="toc-number">5.4.3.</span> <span class="toc-text">gulp.src()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-dest"><span class="toc-number">5.4.4.</span> <span class="toc-text">gulp.dest()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-watch"><span class="toc-number">5.4.5.</span> <span class="toc-text">gulp.watch()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gulp%E7%9A%84%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6"><span class="toc-number">5.5.</span> <span class="toc-text">gulp的常用插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AEhtml%E6%96%87%E4%BB%B6-1"><span class="toc-number">5.5.1.</span> <span class="toc-text">配置html文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AEcss%E6%96%87%E4%BB%B6"><span class="toc-number">5.5.2.</span> <span class="toc-text">配置css文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AEjs%E6%96%87%E4%BB%B6"><span class="toc-number">5.5.3.</span> <span class="toc-text">配置js文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E5%9B%BE%E7%89%87"><span class="toc-number">5.5.4.</span> <span class="toc-text">配置图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">5.5.5.</span> <span class="toc-text">配置服务器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%8C%E6%95%B4%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE"><span class="toc-number">5.5.6.</span> <span class="toc-text">完整基础配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE"><span class="toc-number">5.6.</span> <span class="toc-text">其他配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-load-plugins"><span class="toc-number">5.6.1.</span> <span class="toc-text">gulp-load-plugins</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-inject"><span class="toc-number">5.6.2.</span> <span class="toc-text">gulp-inject</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-notify"><span class="toc-number">5.6.3.</span> <span class="toc-text">gulp-notify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-cached"><span class="toc-number">5.6.4.</span> <span class="toc-text">gulp-cached</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-if"><span class="toc-number">5.6.5.</span> <span class="toc-text">gulp-if</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-size"><span class="toc-number">5.6.6.</span> <span class="toc-text">gulp-size</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-jshint"><span class="toc-number">5.6.7.</span> <span class="toc-text">gulp-jshint</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#grunt"><span class="toc-number">6.</span> <span class="toc-text">grunt</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A5%E9%97%A8%E4%BD%BF%E7%94%A8"><span class="toc-number">6.1.</span> <span class="toc-text">入门使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#grunt%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">6.2.</span> <span class="toc-text">grunt的常用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-initConfig"><span class="toc-number">6.2.1.</span> <span class="toc-text">grunt.initConfig</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84%E7%9A%84%E5%8C%B9%E9%85%8D"><span class="toc-number">6.2.2.</span> <span class="toc-text">文件路径的匹配</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-loadNpmTasks"><span class="toc-number">6.2.3.</span> <span class="toc-text">grunt.loadNpmTasks</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-registerTask"><span class="toc-number">6.2.4.</span> <span class="toc-text">grunt.registerTask</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-registerMultiTask"><span class="toc-number">6.2.5.</span> <span class="toc-text">grunt.registerMultiTask</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-renameTask"><span class="toc-number">6.2.6.</span> <span class="toc-text">grunt.renameTask</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-loadTasks"><span class="toc-number">6.2.7.</span> <span class="toc-text">grunt.loadTasks</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-warn"><span class="toc-number">6.2.8.</span> <span class="toc-text">grunt.warn</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#grunt-event"><span class="toc-number">6.2.9.</span> <span class="toc-text">grunt.event</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#grunt%E7%9A%84%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE"><span class="toc-number">6.3.</span> <span class="toc-text">grunt的常用配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#htmlmin"><span class="toc-number">6.3.1.</span> <span class="toc-text">htmlmin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#less"><span class="toc-number">6.3.2.</span> <span class="toc-text">less</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#cssmin"><span class="toc-number">6.3.3.</span> <span class="toc-text">cssmin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#imagemin"><span class="toc-number">6.3.4.</span> <span class="toc-text">imagemin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#babel"><span class="toc-number">6.3.5.</span> <span class="toc-text">babel</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#concat"><span class="toc-number">6.3.6.</span> <span class="toc-text">concat</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#uglify"><span class="toc-number">6.3.7.</span> <span class="toc-text">uglify</span></a></li></ol></li></ol></li></ol></div></div></div></div></main><footer id="footer" style="background-image: url('https://s1.ax1x.com/2022/12/16/z7g88x.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2023 By 晚夜微雨问海棠</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div><div class="rightMenu-item" id="menu-home"><i class="fa-solid fa-house"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" href="/archives/"><i class="fa-solid fa-archive"></i><span>文章归档</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="fa-solid fa-folder-open"></i><span>文章分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="fa-solid fa-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuNormal"><div class="rightMenu-item" id="menu-translate"><i class="fa-solid fa-earth-asia"></i><span>繁简切换</span></div><div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span>切换模式</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>(() => {
  const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaidWrap.length) {
    window.runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

      Array.from($mermaidWrap).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
        const mermaidID = 'mermaid-' + index
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
          mermaidSrc.insertAdjacentHTML('afterend', svgCode)
        })
      })
    }

    const loadMermaid = () => {
      window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
    }

    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  }
})()</script><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: '',
      appKey: '',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><div class="aplayer no-destroy" data-id="7625372994" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div> <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script> <script src="/swiper/swiper.min.js"></script> <script src="/swiper/swiperindex.js"></script> <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <script src="/js/title.js"></script> <script defer data-pjax src="/js/cat.js"></script> <script defer data-pjax src="/js/rightMenu.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function history_calendar_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>';
                console.log('已挂载history_calendar')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='/'|| '/' ==='all')){

            history_calendar_injector_config()
        } </script><script data-pjax  src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script><script data-pjax src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><script data-pjax>
    function butterfly_categories_card_injector_config(){
      var parent_div_git = document.getElementById('recent-posts');
      var item_html = '<style>li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: 190px;overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: 160px;}}</style><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew6.photophoto.cn%2F20120106%2Fhaimianbaobaotupian-10036689_1.jpg&amp;refer=http%3A%2F%2Fpicnew6.photophoto.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648815&amp;t=a3deb15ddd7a38597964c3a05e519bd7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Asp-Net/&quot;);" href="javascript:void(0);">Asp.Net</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/site-backgound.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C-系列/&quot;);" href="javascript:void(0);">C#系列</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13012860773%2F1000.jpg&amp;refer=http%3A%2F%2Finews.gtimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648865&amp;t=1d2f13b52a7e279e8801545f59eda4e7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Hexo重装记录/&quot;);" href="javascript:void(0);">Hexo重装记录</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202011%2F07%2F20201107183300_ac0c5.thumb.1000_0.jpeg&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648887&amp;t=3d32c6b12a4cf12e5cec3585b79c1fc3);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/EF/&quot;);" href="javascript:void(0);">EF</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F25%2Feb%2F1f%2F25eb1fd40b5a740c2b79e33f700806e5.jpg&amp;refer=http%3A%2F%2Fup.enterdesk.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648908&amp;t=6425ee3bd166b0f5c5ffa6fb18b6937b);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/LOL/&quot;);" href="javascript:void(0);">LOL</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx26%2F36080017392073.jpg&amp;refer=http%3A%2F%2Flmg.jj20.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650136&amp;t=5cc414d0ee58c9e285218d92f6a95513);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/idea/&quot;);" href="javascript:void(0);">idea</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn10%2F320%2Fw700h420%2F20180907%2F5116-hitesuz6599636.jpg&amp;refer=http%3A%2F%2Fn.sinaimg.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650004&amp;t=6a304aa9cc7435ec1d148b8f99092bc0);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界/&quot;);" href="javascript:void(0);">世界</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxCi6.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界见闻录/&quot;);" href="javascript:void(0);">世界见闻录</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxFzD.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端体系/&quot;);" href="javascript:void(0);">前端体系</a><span class="categoryBar-list-count">19</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxnot.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/副业/&quot;);" href="javascript:void(0);">副业</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxMJf.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/文案/&quot;);" href="javascript:void(0);">文案</a><span class="categoryBar-list-count">6</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxQW8.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/办公日常/&quot;);" href="javascript:void(0);">办公日常</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAx3Qg.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/朝花夕拾/&quot;);" href="javascript:void(0);">朝花夕拾</a><span class="categoryBar-list-count">12</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxYes.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端/&quot;);" href="javascript:void(0);">前端</a><span class="categoryBar-list-count">20</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/杂七杂八/&quot;);" href="javascript:void(0);">杂七杂八</a><span class="categoryBar-list-count">7</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/简书/&quot;);" href="javascript:void(0);">简书</a><span class="categoryBar-list-count">5</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/游戏/&quot;);" href="javascript:void(0);">游戏</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li></ul></div></div>';
      console.log('已挂载butterfly_categories_card')
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      }
    if( document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    butterfly_categories_card_injector_config()
    }
  </script><script data-pjax>
  function butterfly_clock_anzhiyu_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "" data-lazy-src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock_anzhiyu')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var qweather_key = '41ea442da35546559913a6a5d54163b2';
  var gaud_map_key = '6b62fbebf584b9a22a85bfccbf90335e';
  var baidu_ak_key = 'undefined';
  var flag = 0;
  var clock_rectangle = '114.35,34.79';
  var clock_default_rectangle_enable = 'true';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_anzhiyu_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_anzhiyu_injector_config();
  }
  </script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js"></script><script data-pjax>
  function butterfly_footer_beautify_injector_config(){
    var parent_div_git = document.getElementById('footer-wrap');
    var item_html = '<div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架为Hexo_v5.4.0" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&amp;logo=hexo" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" data-title="主题版本Butterfly_v4.2.2" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&amp;logo=bitdefender" alt=""/></a><a class="github-badge" target="_blank" href="https://www.jsdelivr.com/" style="margin-inline:5px" data-title="本站使用JsDelivr为静态资源提供CDN加速" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&amp;logo=jsDelivr" alt=""/></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris" alt=""/></a></p>';
    console.log('已挂载butterfly_footer_beautify')
    parent_div_git.insertAdjacentHTML("beforeend",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_footer_beautify_injector_config();
  }
  else if (epage === cpage){
    butterfly_footer_beautify_injector_config();
  }
  </script><script async src="/js/runtime/runtime.min.js"></script><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item swiper_container_card" style="height: auto;width: 100%"><div id="random"><div id="random-banner"><canvas id="peoplecanvas"></canvas></div><a id="random-hover" style="width:100%;height:auto;" href="javascript:toRandomPost()" rel="external nofollow noreferrer" one-link-mark="yes"><i class="fa fa-paper-plane" style="margin-left:10px"></i><div style="margin-left:10px">随便逛逛<i class="fa-solid fa-arrow-right" style="margin-left:10px"></i></div></a></div><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://img2.baidu.com/it/u=4087346614,241521689&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=333" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-19</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">学生人到职业人_心态篇</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/04/xLiBTA.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-04</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">生活の奇思妙想☞2022</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/21/xcAQDH.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-12</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">少年自负凌云笔</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJbF0.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">租房有感</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJLWT.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-25</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">谷歌收藏</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJJd1.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">阳光不燥、微风正好</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script><script defer data-pjax src="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper_init.js"></script><script data-pjax src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/people.min.js"></script><script async src="/anzhiyu/random.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('article-sort-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__slideInRight');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js"></script><script async src="/js/ali_font.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/"});</script></body></html>